jQuery的追加似乎鬼在_.each聲明

Question

很奇怪追加因爲它的聲音我的代碼是這樣的簡單：

$element = "<div>Testing</div>"; 
_.each($('.chat-messages'), function(el) { 
    el.append($element); 
    debugger; 
}); 

如果我從debugger檢查，當我輸入控制檯el，我可以清楚地請參閱$element.el已成功追加。但是，當我點擊繼續時，該元素從未被添加。

$('.chat-messages')選擇器返回兩個對象。第二個是$element.el已經很好的補充了。第一個不是。儘管第一個物體肯定會返回與第二個物體相同的物體。在調試器中，我可以清楚地看到該對象被追加到el。它不會被添加到實際的HTML中。只是調試器中的表示對象。

我是不是正確選擇el？第一個和第二個怎麼可能不同？

Answer 1

• 這工作得很好，雖然我不得不使用timeout因爲DIV沒有渲染，直到然後
• 你認爲你有喜歡的UI類似的問題還沒有呈現？
• 此代碼的工作，如果$元素作爲OP最初要求是一個字符串值"<div>Testing</div>"

var f = function() { 
 
    $element = "<div>Testing</div>"; 
 
    _.each($('.chat-messages'), function(el) { 
 
    el.append($element); 
 
    //debugger; 
 
    }); 
 
}; 
 

 
setTimeout(f, 100);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='chat-messages'> 
 
<div class='chat-messages'> 
 
<div class='chat-messages'> 
 
<div class='chat-messages'>

編輯：

• 通過意見會後，我對append如何工作以及如果我們將$element與實際$("<div>Testing</div>")才發現，該意見是真實的

注1： - 的$.each，你可以選擇所有匹配結果的元素和追加不需要立刻

var f = function() { 
 
    $element = $("<div>Testing</div>"); 
 
    $('.chat-messages').append($element); 
 
}; 
 

 
setTimeout(f, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='chat-messages'></div> 
 
<div class='chat-messages'></div> 
 
<div class='chat-messages'></div> 
 
<div class='chat-messages'></div>

現在讓我們用$.each

var f = function() { 
 
    $element = $("<div>Testing</div>"); 
 
    $('.chat-messages').each(function(ix, el) { 
 
    $(el).append($element); 
 
    }); 
 
}; 
 
setTimeout(f, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='chat-messages'></div> 
 
<div class='chat-messages'></div> 
 
<div class='chat-messages'></div> 
 
<div class='chat-messages'></div>

注2：

• 使用各自的通過元件進行迭代和追加將不會產生所希望的結果作爲評價解釋，並且還附加文檔（下面將其粘貼）

您也可以在頁面上選擇一個元素，並將其插入到另一個 ：

$（「。容器」）.append（$（‘H2’））;

如果選擇這樣一個元件被插入到單個位置 在DOM別處，它將被移動到目標（未克隆）：