当你在每个循环中修改一个jQuery集合时，修改后的集合是包含还是只包含原来的？

Question

當你在每個循環中修改一個jQuery集合時，修改後的集合是包含在內還是只包含原來的？

舉例來說，當你在每個循環中修改jQuery集合時，是包含修改後的集合還是只包含原來的集合？

var collection = $("div");
$(collection).each(function(){
    var originalDiv = $(this);
    var cloneDiv = $(this).clone();
    cloneDiv.insertAfter(originalDiv);
});

克隆的div现在是包含在循环中，还是只包含原来的集合？

Answer 1

jQuery对象在 collection 不受 clone 和 insertAfter jQuery对象是快照（就像你从 querySelectorAll)，而不是活的集合(像你从 getElementsByTagName 或 getElementsByClassName 或类似的），也不 clone 也不 insertAfter 加到 collection.

你可以很容易地自己证明这一点。

// Your code (without the unnecessary `$()` around `collection`
var collection = $("div");
collection.each(function(){
    var originalDiv = $(this);
    var cloneDiv = $(this).clone();
    cloneDiv.insertAfter(originalDiv);
});

// Now, do another operation on the contents of `collection` -- notice how only
// the original contents are affected, not the divs created during the loop
collection.css("color", "blue");

<div>a</div>
<div>b</div>
<div>c</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

即使你使用其中一个方法把元素添加到jQuery对象中，一般来说，jQuery方法会创建新的jQuery对象，而不是修改你所调用的jQuery对象的状态(我想这个规则有例外，但有一个不会马上想起来)。(我想这一规则也有例外，但我没有马上想到。) 例如，你可以 "添加 "一个元素，通过调用 add但它不会改变你调用它的jQuery对象，而是创建并返回一个 新的 jQuery对象，包含原始元素和新元素。