11

如何克隆一个元素并将其插入 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，它也可以是类选择器。

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

4

6 回答 6

23

使用循环，如下所示：

$(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 相同的冲突，但您仍然应该在循环之前将元素放在变量中，否则您最终会得到比您想要的更多的元素。

于 2012-05-03T06:38:33.313 回答
1 
<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>

这是你要找的吗？

于 2012-05-03T07:02:01.077 回答
1

我写了一个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');
于 2015-11-17T16:19:10.283 回答
0

当文档准备好克隆客户端所做的任何更改时，您可能希望克隆字段。这主要是输入的活跃问题。那么你应该：

  1. 克隆文档准备好的元素：var elementClone = $('#element').clone()

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

于 2019-05-27T08:35:29.277 回答
0 

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

`

于 2017-05-08T19:45:49.603 回答
0

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
}

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

意味着这是承诺（它返回具有绑定上下文的函数 this 调用时将克隆）

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

干杯

于 2016-06-24T21:08:43.300 回答