jQuery：使用.after（）或.before（）將元素添加到僅選擇的最後一項

我一直在使用jQuery一段時間，但這是一個新的。一個簡單的例子：jQuery：使用.after（）或.before（）將元素添加到僅選擇的最後一項

HTML

<div class='custom'></div> 
<div class='custom'></div> 
<div class='custom'></div>

的jQuery：

var $customElems = $('.custom'), 
    $spanOuter = $('<span class="outer"/>'), 
    $spanInner = $('<span class="inner"/>'); 

$customElems.each(function() { 
    $(this).wrap($spanOuter).after($spanInner); 
});

的jsfiddle： http://jsfiddle.net/a3ZK8/

我本來期望的 '內' 跨度要添加到在所有三個元件選擇，但它總是插入到最後一個（不管多少）。我用.before（）試過，有和沒有鏈接，相同的結果。我在想什麼？

來源

2014-02-26 pete

您需要克隆該元素。否則，after()將重新定位相同的元素3次，這會導致它僅附加到最後一個循環元素。

$customElems.each(function() { 
    $(this).wrap($spanOuter).after($spanInner.clone()); 
});

演示：「爲什麼會wrap()工作」 Fiddle

你可能會問，這是因爲'wrap（）'在內部clones the element。

來源

2014-02-26 15:56:40

@WEFX謝謝:) –

謝謝！答案被接受爲第一響應者，然而弗朗索瓦和凱文的答案也很有啓發。 – pete

您正在將相同的跨度從一個地方移到另一個地方。如果你同時對所有三個div執行操作，jquery將會克隆該跨度。

http://jsfiddle.net/a3ZK8/1/

var $customElems = $('.custom'), 
    $spanOuter = $('<span class="outer"/>'), 
    $spanInner = $('<span class="inner"/>'); 

$customElems.wrap($spanOuter).after($spanInner);

從。之後的文檔：

重要：如果有多於一個的目標元件，所述插入元件的克隆拷貝將被用於每個所創建的目標，除了最後一個。

這意味着最後一個元素將始終獲得原始元素，而所有其他選定元素將獲得一個克隆。這就是爲什麼當你一次處理一個元素時，它只是移動了相同的跨度。

來源

2014-02-26 16:04:17

好，真棒。哈，我會把這些文檔解釋爲完全相反！從你的答案中另一個有趣的消息是理解.each（）在選擇vs不使用它之間的確切區別 - 似乎期望的操作在兩種情況下都適用於所有元素，儘管方式不同？ – pete

正確。當你使用.each時，這個操作是在每個元素上執行的，就好像你只選擇了一個元素一樣，當你一次對它們執行操作時，它就像你一次處理它們一樣。 –

問題是你正在使用參考到一個jQuery對象。

因此，您繼續在每次迭代中移動對象參考。

如果沒有附加的事件或不需要的span是一個jQuery對象，然後你只需要把這個參數作爲一個HTML字符串文字，而不是一個對象參考

克隆的jQuery不首先需要成爲jQuery對象只是冗餘處理和不必要的開銷。

您的jQuery對象更改爲類似這樣的字符串：

spanInnerString = '<span class="inner"/>';

和你的方法是這樣的：

$(this).wrap($spanOuter).after(spanInner);

結果是：

<span class="outer"><div class="custom"></div><span class="inner"></span></span> 
<span class="outer"><div class="custom"></div><span class="inner"></span></span> 
<span class="outer"><div class="custom"></div><span class="inner"></span></span>

DEMO - 傳遞參數呃作爲HTML字符串

當然，外部跨度也是一樣。除非必須，否則不要創建jQuery對象。

如果因爲要附加事件到span或類似的，你必須使用一個jQuery對象，不是克隆是要走的路，但請務必使用clone(true, true)然後也克隆附着事件。

來源

2014-02-26 16:09:38 Nope

啊，謝謝你指出了不必要的jQuery對象創建！從某個教程中找到它;它確實有點奇怪。 – pete

jQuery：使用.after（）或.before（）將元素添加到僅選擇的最後一項

回答

相關問題