2012-02-03 88 views
1

我有一个li element父级dividholder。我需要多次克隆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> 

- 大卫

+0

你到目前为止做了什么? – 2012-02-03 10:10:12

+0

我试图使用.clone jQuery函数,但它不想工作。 – 2012-02-03 10:12:17

+0

请注意,['li' elements](http://www.w3.org/TR/html5/grouping-content.html#the-li-element)只是'ol','ul'和'menu'元素,而不是'div's。 – 2012-02-03 11:13:39

回答

1

只需使用cloneattr

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); 
} 
+0

如果childs上的数字大约是5,那么它可能没问题,但是数量越大,最好在循环中生成所有标记,然后立即添加到DOM中 – shershen 2012-02-03 11:52:39

0

东西沿着这些路线应该工作:

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

它得到最后一个参考li#holderclones的孩子。然后它将data-id属性的当前值加1,并将该克隆附加回#holder。但是,这实际上并不会改变元素上属性的值(如果您检查了DOM,克隆将看起来与它们所来自的元素具有相同的data-id值)。但是,这并不会改变元素上的属性值。新值与元素相关联,如果您使用jQuery data方法稍后获取此值,那么该值是正确的。如果不是,则需要使用attr而不是data来设置该值。

1

这里有一个快速和肮脏的解决方案:

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

而且 - 我很惊讶,没有其他人已经提到了这一点 - 包含您的元素为列表项应该是<ul>,而不是<div> - <li>标签不能独立存在,它们应该属于列表。