Заполнение списка динамически (jQuery)

Question

<ul>
  <li>item x</li>
  <li>item y</li>
  <li>item z</li>
</ul>
<a href="#">Populate</a>

Я хочу продублировать (скопировать и добавить) все <li> s при нажатии на ссылку "заполнить". Как мне это сделать?

Спасибо

Answer 1

Быстрый и краткий вариант.

$('a').click(function() {
    $('ul').children().clone().appendTo('ul');
})

Конечно, вы можете определить свои 'a' и 'ul' с помощью класса или идентификатора, чтобы быть более конкретными.

EDIT:

Если говорить более подробно об отказе от ответственности, приведенном выше, это будет несколько хрупкое решение, поскольку оно затронет все элементы «a» и «ul». Скорее всего, это не то, что вы хотите.

Лучше всего указать классы или идентификаторы элементов html, а затем прикрепить к ним события.

Пример:

$('#myPopulateAnchorElement').click(function() {
 $('#myExpandableUL').children().clone().appendTo('#myExpandableUL');
});

<ul id='myExpandableUL'>
  <li>item x</li>
  <li>item y</li>
  <li>item z</li>
</ul>
<a href="#" id='myPopulateAnchorElement'>Populate</a>

Благодарю Эд Вудкока за предложение включить упреждающее решение.

Answer 2

var ul = $('ul');

$('a').click(function(){
    ul.children().clone(true).appendTo(ul);
});

Answer 3

попробуйте это: $(function(){ $('.anchorClass').click(function(){ var ul = $('.ulClass'); ul.append(ul.html()); }); });

EDIT:

Вам нужно изменить html на: <pre> <ul class="ulClass"> <li>item x</li> <li>item y</li> <li>item z</li> </ul> <a class="anchorClass" href="#">Populate</a>

Answer 4

Вы можете сделать что-то вроде этого:

$('a').click(function(){
   $('li').each(function(){
      $(this).clone().appendTo('your selector where to put the copy');
   })
})