jquery - 如何使用 jQuery .clone() 为克隆的 DOM 元素分配不同的数据属性

Question

使用$("#set .item").clone().appendTo(".container")我可以克隆：

<div style='display:none' id='set'>
    <div class='item' >
        <img class='avatar' src="http://placekitten.com/80/80" />
        <div class='box' data-id='foo'></div>
    </div>
</div>

并将其附加到容器中。

如果我克隆并附加多个对象，当然clone会创建一个副本：#set .item

for( var i=0; i<3; i++) {
    $("#set .item").clone().appendTo(".container");
}

如何data-为每个克隆分配不同的属性？

这是一个小提琴

Answer 1

试试这个：

$(document).ready(function () {
    for (var i = 0; i < 3; i++) {
        var cln = $("#set .item").clone();
        cln.find('.box').attr('data-id', 'foo_' + i);
        cln.appendTo(".container");
    }
    $('.item .box').text(function(){return $(this).attr('data-id')});
});

演示在这里

如果您想使用 oneliner，请使用以下命令：

$("#set .item").clone().find('.box').attr('data-id', 'foo_' + i).end().appendTo(".container");

jQuery 对此也有一个特殊的方法。在此处阅读有关 .data()的更多信息

Answer 2

那么你只需做这样的事情。

for( var i=0; i<3; i++) {
    $("#set .item").clone().attr('clone-id', i).appendTo(".container");
}