Question

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>以便我得到：

{{1}}

- 大卫

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

Answer 2

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

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

另外 - 我很惊讶没有其他人提到这一点 - 列表项的包含元素应该是<ul>，而不是<div> - <li>标记don'他们应该站在自己的名单上。

Answer 3

这些方面应该有效：

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

它引用了li和clones的最后一个#holder孩子。然后，它会将data-id属性的当前值加1，并将克隆追加回#holder。

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

多次克隆元素

3 个答案: