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，它也可以是类选择器。

我可以重复四次基本陈述，但必须有更优雅的方式吗？

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的元素时你会遇到问题你的选择器是基于一个id（例如$("#col1")）。

如果您的选择器正在使用类，它不会导致与重复ID相同的冲突，但您仍然应该在循环之前将该元素放在变量中，否则您将获得比您想要的更多元素

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>

这是你要找的吗？

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');

Answer 4

Javascript数组有一个填充函数：

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
}

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

意味着这是promise（它返回带有绑定上下文的函数，当被调用时将克隆）

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

欢呼声

Answer 5

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col">clone me...</div>

＆＃13;

`

Answer 6

您可能想在准备好文档时克隆字段，以防止克隆客户端所做的任何更改。这主要是输入方面的活跃问题。然后，您应该：

克隆文档准备就绪的元素：var elementClone = $('#element').clone()
在单击时再次克隆克隆的元素，然后添加elementClone.clone().insertAfter(element)

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

6 个答案: