append - jQuery 在 $.each() 期间追加元素

Question

我正在尝试在 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>

score 7 · Accepted Answer

您每次都附加相同的元素。
每个追加都会将其移动到下一个<li>。

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

您不需要克隆要插入的元素。根据定义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 中的新目标。

score 0 · Accepted Answer

0

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

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

于 2012-09-13T16:54:53.630 回答

score 0 · Accepted Answer

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

检查更新的小提琴

5 回答 5