如何克隆一个元素并将其插入 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，它也可以是类选择器。
我可以将基本语句重复四次，但一定有更优雅的方式吗？
【问题讨论】：
使用循环，像这样：
$(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 的元素时，如果您的选择器基于一个 id（例如$("#col1")），您将遇到问题。
如果你的选择器使用了一个类，它不会引起与重复 id 相同的冲突，但是你仍然应该在循环之前将元素放在一个变量中，否则你最终会得到比你想要的更多的元素.
【讨论】：
<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>
这是您要找的吗？
【讨论】：
我写了一个jQuery插件：
$.fn.multiply = function(numCopies) {
var newElements = this.clone();
for(var i = 1; i < numCopies; i++)
{
newElements = newElements.add(this.clone());
}
return newElements;
};
这段代码 sn-p 将元素构建为一个 jQuery 集合，而不是多次添加到 DOM 中，这可能很慢。
用法：
var li = $('<li>Test</li>');
$('ul').append(li.multiply(4));
所以，对于你的例子：
$('.col').multiply(5).insertAfter('.col');
【讨论】：
Javascript Array 有一个填充函数：
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);
干杯
【讨论】：
$(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>`
【讨论】：
当文档准备好克隆客户端所做的任何更改时，您可能希望克隆字段。这主要是输入的活跃问题。那么你应该：
克隆文档准备好的元素：var elementClone = $('#element').clone()
点击再次克隆克隆的元素并添加elementClone.clone().insertAfter(element)
【讨论】：