Клонирование элемента несколько раз - PullRequest
Новая
       9

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

1 голос
/ 03 февраля 2012

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

- Дэвид

Ответы [ 3 ]

1 голос
/ 03 февраля 2012

Просто используйте 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);
}
1 голос
/ 03 февраля 2012

Вот быстрое и грязное решение:

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

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

0 голосов
/ 03 февраля 2012

Что-то в этом духе должно работать: 

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

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

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

...