jQuery的追加要素

我試圖多次追加在一個jQuery $.each()循環見封之外定義的元素 - http://jsfiddle.net/benedict_w/8Pczs/jQuery的追加要素

可能有人請解釋爲什麼元素僅在最後追加迭代的循環？

例如使用

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

2012-09-13 benedict_w

這裏是一個有效的解決方案：HTTP：//的jsfiddle .net/benedict_w/MJcyD/2/ –

要追加每次相同元素。
每個追加都會將其移動到下一個<li>。

您需要clone()這個元素（或者只是重新創建它）。

2012-09-13 16:51:43 SLaks

感謝這是最接近解釋。 –

雖然這是最好的解釋（這是我要求的），請參閱@ThiefMaster爲我已實施的解決方案 - http://stackoverflow.com/a/12411151/664125 –

@ benedict_w：這就是我的意思是「重新創建它「。 – SLaks

您不需要克隆要插入的元素。據append()

$('li').append('<a href="#">remove</a>'); 
//will append an <a> to every <li> in the "set of matched elements"

UPDATE定義：如果你確實需要的each()迭代器做其他的事情，爲什麼不定義閉合內的元素？

$('li').each(function(){ 
    var remove = $('<a href="#">remove</a>'); 
    $(this).append(remove);  
    //do other things 
});

更新2：只是保持回答高達日期從我從OP的評論

因爲你的問題教訓，你必須參照一個獨特的元素（關閉外部定義）。其中，在第一次迭代中被附加到DOM。下一次嘗試在DOM中的另一個節點上追加同一個元素時。 jQuery可以識別它，然後將它從它的位置分離，創建另一個文檔片段，然後將它附加到DOM中的新目標。

2012-09-13 16:52:48

謝謝 - 我給出的例子是故意簡化的，因爲我想澄清這種行爲。在這種情況下，我還需要將鏈接點擊處理程序綁定到該鏈接。 –

@ benedict_w：你應該說明你的問題是。 :(不管怎麼說，在你的問題只是**定義封閉內**的'刪除'，你就完成了。其他的一切似乎都像現在一樣在圍繞灌木叢跳動。 –

感謝您的輸入我的問題不是如何修復它，但它爲什麼發生 - '有人可以解釋爲什麼元素只附加在循環的最後一次迭代？' –

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

這將同時避免不必要的循環和jQuery對象創建一個新元素附加到每個li。

但是，如果存在多個目標元素，則會在第一個目標之後爲每個目標創建插入元素的克隆副本，並返回該新集（原始元素加克隆）。

2012-09-13 16:53:42 ThiefMaster

感謝 - 這很有用，我可以在這裏鏈接點擊處理程序嗎？例如'$（ 'remove'）.click（function（）{...}）。appendTo（'li'）;' –

是的，它使用'.clone（true）'也可以克隆數據和事件 – ThiefMaster

是的，點擊處理程序 - 如下所示：http://jsfiddle.net/benedict_w/MJcyD/ –

定義變量「刪除」以純文本格式，即

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

2012-09-13 16:54:53

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

2012-09-13 16:55:39

回答