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');
})

当然，您可能希望使用类或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');
   })
})

动态填充列表（jQuery）

4 个答案: