多次克隆一个元素

Question

我有一个 li 元素，其父级为 div，其 id holder。我需要多次克隆 li，让所有克隆都成为 holder div 的父级，并更改它们的 data-ids。我的层次结构如下所示：

<div id="holder">
    <li data-id=0 class="element">
        //other nodes
    </li>
</div>

如何克隆 li 元素 并更改它的 data-id 所以我得到：

<div id="holder">
    <li data-id=0 class="element">
        //other nodes
    </li>
    <li data-id=1 class="element">
        //other nodes
    </li>
    <li data-id=2 class="element">
        //other nodes
    </li>
    <li data-id=3 class="element">
        //other nodes
    </li>
    <li data-id=4 class="element">
        //other nodes
    </li>
    <li data-id=5 class="element">
        //other nodes
    </li>
</div>

-- David

Answer 1

只需使用 clone 和 clone 即可。 jquery.com/attr" rel="nofollow">attr：

var holder, li, clone, counter;
holder = $("#holder");
li = holder.find("li:first");
counter;
for (counter = 1; counter <= 5; ++counter) {
    clone = li.clone();
    clone.attr("data-id", counter);
    clone.appendTo(holder);
}

Answer 2

这是一个快速而肮脏的解决方案：

http://jsfiddle.net/Epzt9/7/

另外 - 和我很惊讶没有其他人提到这一点 - 列表项的包含元素应该是

，而不是
-
标签不独立存在，它们应该属于一个列表。

Answer 3

按照这些思路应该可以工作：

var clone = $("#holder > li").last().clone();
clone.data("id", parseInt(clone.data("id"), 10) + 1);
$("#holder").append(clone);

它获取对 #holder 和 克隆 那个。然后，它将 data-id 属性的当前值加 1，并将克隆追加回 #holder。

但是，这实际上不会更改元素上属性的值（如果您检查 DOM，克隆似乎与它们来自的元素具有相同的 data-id 值）。新值与该元素关联，如果您稍后使用 jQuery data 方法获取该值，这很好。如果没有，您需要使用 attr 而不是 data 来设置该值。