如何使用jQuery多次复制列表元素答案

【问题标题】：How to duplicate list element more than one time with jQuery如何使用jQuery多次复制列表元素
【发布时间】：2013-01-15 13:28:54
【问题描述】：

我有个小问题。是否有任何选项可以使用 jquery 复制多个元素？我有一个元素列表，我可以克隆，复制它 f.e. 7次？

<ul id="my_list>
   <li class="one_element>data</li>
</ul>

还有一些jquery，我不知道怎么写：

var mylist = $('#my_list');
myList.find('li').clone(2);

你能帮帮我吗？谢谢。

【问题讨论】：

你想用克隆做什么？
没什么特别的，但我需要最小化我的 html
我的意思是你想立即将它们添加到同一个列表中（或者以其他方式将它们插入到 DOM 中），还是你想存储它们以供以后插入？您希望它们相同还是需要更改属性或内容？因为“最佳”解决方案可能会因您的意图而异......
是的，以后通过 ajax 操作插入，但我需要通过 js 站点执行此操作

【解决方案1】：

var mylist = $('#my_list');
for ( i = 0; i < 7;i++){
      mylist.find('li:first').clone().appendTo(mylist);
}

【讨论】：

【解决方案2】：

您可以轻松使用$.each jquery 循环包装器：

$.each(new Array(7),function(){
    $('#list li:first').clone().appendTo('#list');
});

【讨论】：

【解决方案3】：

你可以通过链接克隆来做两次：

var mylist = $('#my_list');
myList.find('li:first').clone().appendTo(myList).clone().appendTo(myList);

【讨论】：

【解决方案4】：

  var n=0;
  var mclon = $('#my_list');
 for ( i = 0; i < 7;i++){
  mclon.clone().attr('id', 'id'+(n++) ).insertAfter( mclon );
  }

使用.clone() 七次。

说明：这样创建的所有七个克隆都具有唯一 ID（id=my_list+n 其中 n 取决于迭代次数）。

【讨论】：

【解决方案5】：

如果不想深度克隆，那么可以使用数组join()方法创建一个HTMLString对应n元素个数，如下图：

var elementString = new Array(++n).join($(selector).get(0).outerHTML)

你可以附加到任何你想要的元素。

基本上我们将元素的outerHTML 传递给数组join() 方法，其长度为1 超过所需的克隆数。这是因为join() 方法在第一个元素之后开始追加并在最后一个元素之前停止。

即

[null,null,null,null].join(","); // results in ",,," not ",,,,"

你可以这样做：

$("ul").append(new Array(8).join($(".one_element").get(0).outerHTML));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="my_list">
  <li class="one_element">data</li>
</ul>

【讨论】：