Как клонировать элемент и вставлять его несколько раз за один раз?

Как я могу клонировать элемент и вставлять его 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>

Селектору не нужно использовать уникальный идентификатор, он также может быть селектором классов.

Я мог бы просто повторить базовый оператор четыре раза, но должен быть более элегантный способ?

Ответ 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>

Ответ 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>

это то, что вы ищете?

Ответ 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');

Ответ 4

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

веселит

Ответ 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>

Ответ 6

Возможно, вы захотите клонировать поля, когда документ будет готов, против клонирования любых изменений, внесенных клиентом. Это в основном активная проблема с входами. Тогда вам следует:

var elementClone = $('#element').clone() элемент в готовом документе: var elementClone = $('#element').clone()
при клике снова клонируем клонированный элемент и добавляем elementClone.clone().insertAfter(element)