2

我有一个意想不到的问题。

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

我认为这个堆栈是一个有序列表。因此，我的目标是动态创建 a#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);

但输出是一样的。

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

4

4 回答 4

4

这不是 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);
});
于 2012-11-16T09:41:52.470 回答
3

nbrooks 答案的另一种变体

// get regular array of matched DOM nodes
var divs = $('.myDiv').toArray(); 
// require you to find out on which position you need to put your new div
divs.splice(2, 0, $('<div/>').attr("id","div4").addClass('myDiv').get(0))
// again wrap in jQuery to get what you need
divs = $(divs);
于 2012-11-16T09:47:04.340 回答
2

从 jQuery 1.4 开始，来自 .add() 的结果将始终按文档顺序返回（而不是简单的串联）。

这是记录在案的行为，它不是一个正常的数组。

http://api.jquery.com/add/

于 2012-11-16T09:35:06.137 回答
1

真的似乎不是 jquery 行为，而是更多 javascript 浏览器的本机代码实现，因为我得到这些结果，具体取决于使用的浏览器（windows7）：

  • Firefox 和IE9：1、2、3、5、6、4
  • 野生动物园：1,2,3,4,5,6
  • 铬：4 ,1,2,3,5,6
于 2012-11-16T09:43:20.330 回答