Question

我试图在jQuery $.each()循环中重复追加在闭包之外定义的元素，请参阅 - http://jsfiddle.net/benedict_w/8Pczs/

有人可以解释一下为什么元素只附加在循环的最后一次迭代中吗？

e.g。

<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>

Answer 1

每次都附加相同的元素每个附加内容都会将其移至下一个<li>。

每次迭代都需要clone()元素（或者只是重新创建它）。

Answer 2

$('<a href="#">remove</a>').appendTo('li');

这将为每个li添加一个新元素，同时避免不必要的循环和jQuery对象创建。

但是，如果有多个目标元素，则会在第一个目标元素之后为每个目标创建插入元素的克隆副本，并返回该新集合（原始元素加克隆）。

Answer 3

您无需克隆要插入的元素。根据{{3}}

的定义

$('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中的新目标。

Answer 4

将变量“remove”定义为纯文本，即

var remove = '<a href="#">remove</a>';

Answer 5

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');