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 ]

警告:(のように$div.appendBefore($divs[3])）DOMツリーに挿入したくありません。スタックに追加したいだけです$divs。

このスタックは順序付きリストだと思いました。したがって、私の目標は、オンザフライで作成し、DOMツリーに挿入せず#div4に $divsスタックに挿入することでした。挿入は機能しますが、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のもう1つの変種が答えます

// 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の動作ではなく、使用されているブラウザー（windows7）に応じて、これらの結果が得られるjavascriptブラウザーのネイティブコードの実装のようです。

  • FirefoxおよびIE9：1、2、3、5、6、4
  • サファリ：1、2、3、4、5、6
  • Chrome ：4、1、2、3、5、6
于 2012-11-16T09:43:20.330 に答える