2012-02-03 2 views
1

У меня есть 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> 

- Дэвид

+0

что вы пытались до сих пор? –

+0

Я пытался использовать функцию .clone jQuery, но он не хотел работать. –

+0

Обратите внимание, что элементы '' li' (http://www.w3.org/TR/html5/grouping-content.html#the-li-element) являются действительными только дочерними элементами 'ol',' ul' и Элементы 'menu', а не' div '. –

ответ

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

, если число на дочерних элементах составляет около 5, может быть хорошо, но с большим числом лучше всего генерировать ВСЕ разметку в цикле, а затем добавлять к DOM сразу – shershen

0

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

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, чтобы установить значение.

1

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

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^