动态填充列表 (jQuery)

Question

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

我想在单击“填充”链接时复制（复制并附加）所有

。我该怎么做？

谢谢

Answer 1

快速简洁的版本。

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

当然，您可能需要使用类或 id 来定义“a”和“ul”，以便更加具体。

编辑：

为了扩展上面给出的免责声明，这将是一个有点脆弱的解决方案，因为它将影响所有“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>

感谢 Ed Woodcock 建议纳入先发制人的解决方案。

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

var ul = $('ul');

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

Answer 4

你可以这样做：

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