¿Cómo clonar un elemento e insertarlo varias veces de una vez?

Question

¿Cómo puedo clonar un elemento e insertarlo 5 veces una detrás de la otra? Por supuesto, esto es la declaración de base:

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

Esto es lo que necesito para obtener:

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

El selector no tiene por qué ser el uso de un identificador único, sino que también puede ser un selector de clase.

Podría repetir la declaración base cuatro veces, pero debe haber una manera más elegante?

Answer 1

utilizar un bucle, como esto:

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

---

Coloque el elemento en una variable antes del bucle, de lo contrario tendrá problemas cuando llegue a varios elementos con el La misma identificación era su selector para basarse en una identificación (eg $("#col1")).

Si su selector está utilizando una clase, no causa los mismos conflictos que las identificaciones duplicadas, pero aún debe poner el elemento en una variable antes del ciclo, de lo contrario terminará con muchos más elementos que usted querer.

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> 

¿Esto es lo que busca?

Answer 3

I escribió un 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; 
}; 

Este fragmento de código construye los elementos como un conjunto jQuery, en lugar de añadir a los DOM varias veces que puede ser lento.

Uso:

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

Así que, por su ejemplo:

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

Answer 4

Javascript matriz tiene una función de relleno:

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

por lo que podría escribir algo como esto

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

y si quería como una función de jQuery que se puede volver a utilizar se podría escribir algo como esto

$.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 
} 

esto le da la flexibilidad necesaria para separar la llamada a la función del clon de ser evaluado solo cuando lo necesita Entonces, si quisieras, podrías dividir la llamada y evaluarla más tarde.

significando esta es la promesa (que vuelve funciones con el contexto ligado a esto que cuando se le va a clonar)

new Array(amount).fill(cloneFunction); 

y esta es la resolución

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

y este pequeño última parte se encarga de la hecho de que he creado una matriz de objetos jQuery, pero realmente quiero una colección jQuery

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

pero, en cualquier caso, su solución final sería algo como esto, si sigue esta ruta.

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

aplausos

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

`