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 )

描述：返回jQuery 集合中第一个元素的命名数据存储中的值，由 data(name, value) 设置。

于 2011-05-12T13:20:45.710 回答