javascript - jquery 在有序堆栈中添加 not-in-dom 元素(in-dom 元素)

Question

我遇到了一个意想不到的问题。

HTML

<div id="div1" class="myDiv"></div>
<div id="div2" class="myDiv"></div>
<div id="div3" class="myDiv"></div>
<div id="div5" class="myDiv"></div>
<div id="div6" class="myDiv"></div>

JS

$(function() {
    var $divs = $('.myDiv');
    // create new div not in tree
    var $div = $('<div/>').attr("id","div4").addClass('myDiv');
    // insert #div4 in right position. Only in stack, not in dom tree.
    $divs = $divs.slice(0,3).add($div).add($divs.slice(3));

    console.log($divs);
});

输出

[div#div1.myDiv, div#div2.myDiv, div#div3.myDiv, div#div5.myDiv, div#div6.myDiv, div#div4.myDiv]

警告:我不想将其插入到 dom 树中(例如 $div.appendBefore($divs[3]))，我只想将其附加到我的堆栈中 $divs.

我认为这个堆栈是一个有序列表。因此，我的目标是动态创建一个 #div4 并将其插入到 $divs 堆栈中，而不将其插入到 DOM 树中。插入有效，但 jquery 似乎忽略了给定的顺序。

我对这个问题有其他解决方案(即在 dom 中追加，不显示)，好的..但是:

我的问题是:为什么？这是某些缓存优化的错误，还是已记录的功能？

我也尝试过:

var $newDivs = $();
$divs.each(function(i,e) {
    if(i==3) 
        $newDivs = $newDivs.add($div);
    $newDivs = $newDivs.add(e);
});
console.log($newDivs);

但输出是相同的。

编辑:只是为了完整性:这只是对复杂代码的快速破解。我知道目的不干净

Answer 1

这不是 jQuery 对象的目的。保持数据结构的直线性；我根本不确定“堆栈”的概念是如何出现的。使用常规内置 JS 数组(保持项目有序):

$(function() {
    // make an array of existing divs
    var divs = $('.myDiv').toArray();

    // create new div
    var newDiv = $('<div/>').attr("id","div4").addClass('myDiv').get(0);

    // insert newDiv at index 4 in array
    divs.splice(4, 0, newDiv);

    // Rejoice.
    console.log(divs);
});