jquery - 动态填充列表 (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');
})

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

编辑:

为了扩展上面给出的免责声明，这将是一个有点脆弱的解决方案，因为它将影响所有“a”和“ul”元素。这可能不是您想要的。

更好的形式是为您的 html 元素提供类或 id，然后将事件 append 到这些元素。

示例:

$('#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 建议纳入抢占式解决方案。