Наполнение список динамически (JQuery)

Question

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

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

Благодаря

Answer 1

Краткая и краткая версия.

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

Конечно, вы можете определить свой «а» и 'Ульянова с классом или идентификатором для того, чтобы быть более конкретным.

EDIT:

Для расширения оговорки приведенной выше, это будет несколько хрупким решение, как это будет влиять на все элементы «а» и «уль». Возможно, это не так, как вы хотите.

Лучшая форма - предоставить классы 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> 

С благодаря Ed Вудкоком для предполагая включение упреждающего раствора.

Answer 2

попробовать это:

 
$(function(){ 
    $('.anchorClass').click(function(){ 
     var ul = $('.ulClass'); 
     ul.append(ul.html()); 
    }); 
});

EDIT:

Вам нужно изменить HTML для:

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

Answer 3

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

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

Answer 4

var ul = $('ul'); 

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