动态填充列表（jQuery）

Posted 2023-02-22

【中文标题】动态填充列表（jQuery）

【英文标题】：Populating a list dynamically (jQuery)

【发布时间】：2011-01-13 02:26:26

【问题描述】：

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

单击“填充”链接时，我想复制（复制和附加）所有 <li>s。我该怎么做？

谢谢

【参考方案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 建议纳入先发制人的解决方案。

【讨论】：

如果页面上有另一个 UL，这将非常糟糕。在没有类或 id 选择器的情况下使用 jQuery 几乎总是一个坏主意！

@Ed Woodcock - 阅读我的其余答案......我正在使用我所获得的内容，然后建议使用类或 id 指定“a”和“ul”。

是的，我没有不同意你的回答，我只是说不使用选择器是不好的：发布像你的回答这样的半正确代码的问题是，没有经验或困惑的人会在不阅读其余答案的情况下使用代码，这是一件坏事！

@Ed Woodcock - 点了，但我更愿意给出一个特定于问题的答案，如果有必要的话还附上警告。如果我要添加替代答案，以防页面上下文不允许特定答案正常运行，也许会更好。我会用这样的方式更新我的答案。

很公平，只是您经常发现这里的人们即使在被告知存在缺陷时仍会锁定一个糟糕的解决方案，因此最好直接指出更好的做事方式！ :)

【参考方案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>

【参考方案3】：

var ul = $('ul');

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

【参考方案4】：

你可以这样做：

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