0

私はいくつかの既存のノードを参照し、DOM ツリーに存在しないいくつかの新しい jQ ノードを作成する独自の jQuery プラグインを作成しています (それらは追加されません)。メソッドを使用して、.add()各要素を新しいコレクションに追加しています。

何が起こるかというと、このコレクションの順序が奇妙に見えます (論理的なパターンが見つかりません)。ドキュメントの次の注記が理由である可能性があります。

jQuery 1.4 以降、.add() からの結果は常に (単純な連結ではなく) ドキュメント順に返されます。

次の例を考えてみましょう。

HTML

<body>
    <a id="existing1"></a><a id="existing2"></a>
</body>

JS

<script type="text/javascript">

    function addToColl(selector) {
        coll = coll.add(selector);
        var n = $(selector).get(0).id.match(/\d+/)[0];
        for (var i = 0; i < 4; i++) {
            var a = $('<a>',{id:'virtual'+n+'_'+i});
            coll = coll.add(a);
        }
    }

    $(document).ready(function() {

        coll = $();

        addToColl('#existing1');
        // uncomment the following to see what's happening
        //addToColl('#existing2');

        $.each(coll,function(idx,elm) {
            console.log(elm.id);
        });

    });

</script>

出力:

existing1
virtual1_0
virtual1_1
virtual1_2
virtual1_3

コメント化された関数呼び出しのコメントを外すと、出力されます

existing1
virtual1_3
virtual1_2
virtual1_1
virtual1_0
existing2
virtual2_0
virtual2_1
virtual2_2
virtual2_3

この混乱を避けるために何をすべきか？

------ [編集] ------
関数 の予期しない動作のためadd()、ネイティブ Javascript 配列を使用して要素を収集することになりました (つまり、push()メソッドを使用します)。要素の収集が完了したら、要素を jQuery コレクションに変換します。

4

1 に答える 1

1

jQuery でのコードは次のようになります。

    add: function( selector, context ) {
            var set = typeof selector === "string" ?
                            jQuery( selector, context ) :
                            jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),
                    all = jQuery.merge( this.get(), set );

            return this.pushStack( isDisconnected( set[0] ) || isDisconnected( all[0] ) ?
                    all :
                    jQuery.unique( all ) );
    },

したがって、コレクションの最初の要素が追加されるか、マージされたコレクションが切断された場合、マージされたコレクションを、jQuery.merge()たまたまそれらを配置した順序で返すだけです。それらが両方とも接続されている場合はjQuery.unique()、 を呼び出して DOM 順序に配置します。

ただし、並べ替えを行うための比較関数は次のとおりです。

    function( a, b ) {
            if ( a === b ) {
                    hasDuplicate = true;
                    return 0;
            }

            return ( !a.compareDocumentPosition || !b.compareDocumentPosition ?
                    a.compareDocumentPosition :
                    a.compareDocumentPosition(b) & 4
            ) ? -1 : 1;
    }

compareDocumentPosition()これは、切断された要素を接続された要素と比較するとき、または切断された要素を互いに比較するときに、ブラウザがどのように実装するかに依存します。どちらの場合も (1)を返すと思いDOCUMENT_POSITION_DISCONNECTEDますが、Chrome はDOCUMENT_POSITION_FOLLOWING後者の場合は 4 () を返し、最初の場合は他のビットの組み合わせを返します。

于 2012-12-31T18:34:43.550 に答える