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-属性？

这是FIDDLE

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')});
});

演示here

如果你想使用oneliner，请使用：

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

jQuery也有一个特殊的方法。阅读更多here about .data()

Answer 2

嗯，你只需做这样的事情。

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

如何使用jQuery .clone（）为克隆的DOM元素分配不同的数据属性

2 个答案:

演示here