如何一次克隆一个元素并多次插入它？

Question

如何克隆一个元素并在其后面连续插入5次？以下是基本语句：

$('.col').clone().insertAfter('.col');

这是我需要获取的内容：

<div class="col" id="original"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>
<div class="col"> </div>

选择器不必使用唯一的id，也可以是class选择器。

我可以只重复基本语句四次，但肯定有更简洁的方法？

- uriah

Answer 1

使用循环，像这样：

$(document).ready(function() {
    var e = $('.col');
    for (var i = 0; i < 5; i++) {
      e.clone().insertAfter(e);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col">clone me...</div>

在循环之前将元素放入变量中，否则如果您的选择器基于ID（例如 $（“＃col1”）），并且获取了多个具有相同ID的元素，则会遇到问题。

如果您的选择器使用类，则不会导致重复ID的冲突，但是在循环之前仍应将元素放入变量中，否则您将得到比所需更多的元素。

- Guffa

---

谢谢 Guffa，这很完美！ - uriah

Answer 2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
    $('.col').each(function(){
        $(this).clone().insertAfter(this);
    }); 
  });  
</script>
 <div class="col">First div </div>
 <div class="col">2nd </div>
 <div class="col">3rd </div>
 <div class="col">4th </div>
 <div class="col">5th </div>

这是您在寻找的吗？

- arun

Answer 3

我写了一个 jQuery 插件：

$.fn.multiply = function(numCopies) {
    var newElements = this.clone();
    for(var i = 1; i < numCopies; i++)
    {
        newElements = newElements.add(this.clone());
    }
    return newElements;
};

这段代码片段将元素作为jQuery集合构建，而不是多次添加到DOM中，这样可以提高速度。 用法：

var li = $('<li>Test</li>');
$('ul').append(li.multiply(4));

所以，针对您的例子：

$('.col').multiply(5).insertAfter('.col');

- Alex W

Answer 4

Javascript数组有一个fill函数:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

所以你可以写出类似这样的代码

 $(
   new Array(copies).fill(function () { 
     return $(this).clone(); 
   }.bind(el))
   .map(function (el) {
     return el();
   })
 ).map(function() { return this.toArray(); }); //Turn into jQuery

如果你想把它作为一个可重复使用的jQuery函数，你可以编写类似这样的代码

$.fn.multiply = function(amount) {
   var cloneFunction = (function() {
     return $(this).clone();
   }).bind(this);

   return $(
      new Array(amount).fill(cloneFunction).map(function(el) {
         return el();
      });
   ).map(function() { return this.toArray(); }); //Turn into jQuery
}

这使您能够灵活地将克隆函数的调用与仅在需要时进行评估分开。因此，如果您想要，可以拆分调用并稍后进行评估。

这意味着这是一个承诺（它返回绑定到此上下文的函数，当调用时将进行克隆）

new Array(amount).fill(cloneFunction);

这就是解决方案

.map(function(el) { return el(); })

这个小的最后一部分处理了一个问题，即我创建了一个jQuery对象数组，但实际上我想要一个jQuery集合

.map(function() { return this.toArray(); }); //Turn into jQuery

但无论如何，如果你选择这种方法，你最终的解决方案会是这个样子。

$(el).multiply(amount).insertAfter(anotherEl);

干杯

- lvalencia

Answer 5

$(document).ready(function() {
    var e = $('.col');
    for (var i = 0; i < 5; i++) {
      e.clone().insertAfter(e);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col">clone me...</div>

`

- Gerard Duffy

Answer 6

当文档已准备好时，您可能希望克隆字段以克隆客户端所做的任何更改。这在输入方面是最常见的问题。然后您应该：

1. 在文档准备就绪时克隆元素：var elementClone = $('#element').clone()

2. 单击时再次克隆克隆的元素并添加 elementClone.clone().insertAfter(element)

- Nagibaba