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

How to clone an element and insert it multiple times in one go?

提问by uriah

How can I clone an element and insert it 5 times right after each other? This of course is the base statement:

如何克隆一个元素并将其插入 5 次？这当然是基本陈述：

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

Here's what I need to get:

这是我需要得到的：

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

The selector doesn't need to be using an unique id, it can also be a class selector.

选择器不需要使用唯一的 id，它也可以是一个类选择器。

I could just repeat the base statement four times but there must be a more elegant way?

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

回答by Guffa

Use a loop, like this:

使用循环，如下所示：

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

---

---

Put the element in a variable before the loop, otherwise you will run into problems when you get several elements with the same id were your selector to be based on an id (e.g. $("#col1")).

将元素放在循环之前的变量中，否则当你得到几个具有相同 id 的元素时你会遇到问题，而你的选择器是基于一个 id（例如$("#col1")）。

If your selector is using a class, it doesn't cause the same conflicts as duplicate id's, but you should still put the element in a variable before the loop, otherwise you will end up with a lot more elements than you want.

如果您的选择器使用一个类，它不会导致与重复 id 相同的冲突，但是您仍然应该在循环之前将元素放在变量中，否则最终会得到比您想要的多得多的元素。

回答by arun

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

is this you looking for?

这是你要找的吗？

回答by Alex W

I wrote a jQuery plug-in:

我写了一个jQuery插件：

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

This code snippet builds the elements as a jQuery set, instead of adding to the DOM multiple times which can be slow.

此代码片段将元素构建为 jQuery 集，而不是多次添加到 DOM 中，这可能会很慢。

Usage:

用法：

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

So, for your example:

所以，对于你的例子：

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

回答by lvalencia

Javascript Array has a fill function:

Javascript Array 有一个填充功能：

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

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

So you could write something like this

所以你可以写这样的东西

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

and if you wanted it as a jQuery function that you could re-use you could write something like this

如果你想把它作为一个可以重用的 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 gives you the flexibility to separate the function call of clone from being evaluated only when you need it. So if you wanted to you could split up the call and evaluate later.

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

meaning this is the promise (it returns functions with bound context to this that when called will clone)

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

new Array(amount).fill(cloneFunction);

and this is the resolution

这是决议

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

and this little last bit handles the fact that I created an array of jQuery objects but really I want a jQuery collection

最后一点处理这样一个事实，即我创建了一个 jQuery 对象数组，但我真的想要一个 jQuery 集合

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

but at any rate your final solution would look something like this, if you go this route.

但无论如何，如果你走这条路，你的最终解决方案看起来像这样。

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

cheers

干杯

回答by Gerard Duffy

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

`

`

回答by Nagibaba

You might want to clone fields when the document is ready against cloning any changes made by client. This is mostly active issue with inputs. Then you should:

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

1. Clone the element on document ready: var elementClone = $('#element').clone()

2. on click clone the cloned element again and add elementClone.clone().insertAfter(element)

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

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