动态填充列表（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'类或id以便更具体。

编辑：

要在上面给出的免责声明扩大，这将是一个有些脆弱溶液，因为它会影响所有的“a”和“UL”元素。这可能不是你想要的。

更好的形式是给你的HTML元素类或ID，然后将事件附加到这些。

实施例：

$('#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

试试这个：

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

编辑：

你需要你的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); 
});