0

共通クラスで表される既存の要素セットに新しい div 要素をオンザフライで追加しようとしています。この一連の要素には jQuery .data() も含まれており、これを使って簿記を行います。

問題は、「before()」を使用して新しい要素を追加しようとすると、前述の .data() 値が消去されることです。しかし、これは「after()」を使用する場合には当てはまりません。

これが役立つかどうかはわかりませんが、着信 div 要素は、それらが追加される既存の div 要素のセットと同じクラスを共有します。

jsfiddle で自己完結型の例を作成しました。

違いを知るには、JavaScript コードの .after() と .before() の間の行を切り替えるだけです。

簡単に参照できるように、ここにコードも貼り付けます。

HTML スニペット

<div id="parent-container">

    <div  id='child1' class="child">I am a child 1 - static</div>

</div>

JavaScript スニペット

$(document).ready(function() {

    var children = $(".child");

    children.data("newData", "Data for .child elements");

    alert("before dom manipulation -> " + children.data("newData"));        

    var dynamicChildDiv = $("<div id='child2' class='child'>I am child 2 - dynamic</div>");        

    // Adding a new div "after" the first .child works fine as far as preserving the existing properties on .class
    $(".child:first").after(dynamicChildDiv);

    // Adding a new div "before" the first .child causes havoc on the stored properties on .child
    //UNCOMMENT ME AFTER COMMENTING THE ".after" method above.
    //$(".child:first").before(dynamicChildDiv);

    children = $(".child");

    alert("after dom manipulation -> " + children.data("newData"));   

});
4

1 に答える 1

1

一部のデータを選択範囲.data()に保存すると、その選択範囲内のすべての要素にデータが保存されます。ただし、取得すると、最初のもののみが選択されます。

新しいものを最初に置き、同じデータを保存しないため、データにアクセスしようとしても何も返されません。

要件はわかりませんが、ほとんどの場合、すべての.child要素に同じデータを保存する必要はありません。たぶん、それを共通の親に保存し、そこからも取得します。

からの引用.data( key )

説明： data（name、value）で設定された、jQueryコレクションの最初の要素の名前付きデータストアでの値を返します。

于 2011-05-12T13:20:45.710 に答える