多次克隆一个元素答案

【问题标题】：Cloning an element multiple times多次克隆一个元素
【发布时间】：2012-02-03 10:08:21
【问题描述】：

我有一个 li element 以 div 和 id holder 为父。我需要多次克隆li，将所有克隆都作为holder div 的父级并更改它们的data-ids。我的层次结构如下所示：

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

我如何克隆 li element 而不是将其更改为 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>

-- 大卫

【问题讨论】：

到目前为止你尝试了什么？
我尝试使用 .clone jQuery 函数，但它不想工作。
请注意，li elements 仅是 ol、ul 和 menu 元素的有效子元素，而不是 divs。

标签： javascript jquery html clone nodes

【解决方案1】：

只需使用clone 和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);
}

【讨论】：

如果孩子的数量约为 5 可能没问题，但如果数量较大，最好循环生成所有标记，然后一次添加到 DOM 中

【解决方案2】：

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

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

另外 - 我很惊讶没有其他人提到这一点 - 你的列表项的包含元素应该是 <ul>，而不是 <div> - <li> 标签不能独立存在，它们应该属于一个列表。

【讨论】：

【解决方案3】：

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

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

它获得对#holder 和clones 的最后一个li 子级的引用。然后它将data-id 属性的当前值加1，并将克隆附加回#holder。

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

【讨论】：