我正在尝试在 jQuery $.each()
循环中重复附加在闭包外部定义的元素,请参阅 - http://jsfiddle.net/benedict_w/8Pczs/
有人可以解释一下为什么该元素只附加在循环的最后一次迭代中吗?
例如
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>
使用以下 jQuery:
var remove = $('<a href="#">remove</a>');
$('li').each(function(){
$(this).append(remove);
});
生产者:
<ul>
<li>blah</li>
<li>blah</li>
<li>blah <a href="#">remove</a></li>
</ul>
您每次都附加相同的元素。
每个附加项都会将其移动到下一个<li>
。
您需要为每次迭代clone()
元素(或只是重新创建它)。
$('<a href="#">remove</a>').appendTo('li');
这将在每个li
附加一个新元素,同时避免不必要的循环和 jQuery 对象创建。
但是,如果有多个目标元素,则会在第一个目标之后为每个目标创建插入元素的克隆副本,并返回该新集(原始元素加上克隆)。
http://api.jquery.com/appendTo/
您不需要克隆要插入的元素。根据append()
的定义
$('li').append('<a href="#">remove</a>');
//will append an <a> to every <li> in the "set of matched elements"
演示
更新:如果你确实需要each()
迭代器来做其他事情,为什么不在闭包中定义你的元素呢?
$('li').each(function(){
var remove = $('<a href="#">remove</a>');
$(this).append(remove);
//do other things
});
更新2:只是从我从OP的评论中了解到的答案保持最新
因为在您的问题中,您引用了一个唯一元素(在闭包外部定义)。在第一次迭代时附加到 DOM。下次您尝试在 DOM 中的另一个节点上附加相同的元素时。 jQuery 识别出这一点,因此将其从其位置分离,创建另一个文档片段,然后将其附加到 DOM 中的新目标。
将变量"remove"定义为纯文本,即
var remove = '<a href="#">remove</a>';
var remo[enter link description here][1]ve = $(
弄乱了你的代码。它正在附加元素,因此它正在发生。只需将其作为字符串而不是选择器传递即可或克隆对象。这应该为您完成工作,,
var remove = '<a href="#">remove</a>' ;
$('li').each(function(){
$(this).append(remove);
});
您也可以使用 appendTo 来避免迭代
$('<a href="#">remove</a>').appendTo('li');
检查更新的小提琴