Клонирование элемента несколько раз

Question

У меня есть li element, основанный на div с idholder. Мне нужно клонировать 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> 

- Дэвид

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

Что-то вдоль этих линий должно работать:

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

Он ссылается на последние li ребенок #holder и clones это. Затем он добавляет 1 к текущему значению атрибута data-id и добавляет клон обратно в #holder.

Однако это фактически не изменит значение атрибута элемента (если вы проверили DOM, клоны, похоже, будут иметь то же значение data-id, что и элемент, из которого они пришли). Новое значение связано с элементом, что отлично, если вы используете метод jQuery data для получения этого значения позже. Если нет, вам нужно будет использовать attr вместо data, чтобы установить значение.

Answer 3

Вот быстрый и грязный раствор:

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

Также - и я удивлен, что никто еще не говорил об этом - ваш содержащий элемент для элементов списка должен быть <ul>, а не <div> - <li> теги не стоят самостоятельно, они должны принадлежать списку.