多次克隆元素

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

 
 
 //other nodes 
  

我如何克隆li element而不是更改它的data-id所以我得到：

 
 
 //other nodes 
 
 //other nodes 
 
 //other nodes 
 
 //other nodes 
 
 //other nodes 
 
 //other nodes 
  

– 大卫

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/

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

，而不是

–

标签不能独立存在，它们应该属于到列表。

Answer 3

这些方面的东西应该有效：

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

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

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