Question

我有点小问题。是否有任何选项可以使用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);

你帮我吗？ THX。

Answer 1

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

Answer 2

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

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

Answer 3

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

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

Answer 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取决于迭代次数）。

Answer 5

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

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

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

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

即，

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

在您的情况下，您可以这样做：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用jQuery多次复制list元素

5 个答案: