Cómo clonar() un elemento n veces?

Question

Tengo una tabla dinámica que quiero adjuntar elementos <col> con jQuery.

tengo unas pocas cosas:

var tds = jQuery("tr > td").length; // count how many tds 
jQuery("#colgroup-compare > col").clone() // clone 
    .appendTo('#colgroup-compare'); // and append 

Obviamente esto sólo añade 1 <col>, quiero añadir números (n). ¿Cómo haría esto?

Tengo la longitud, tengo la habilidad de clonar, ahora ¿cómo la combino?

Answer 1

Con un bucle:

var $col = $("#colgroup-compare > col"); 
for(var i = 0; i < n; i++){ 
    $col.clone().appendTo('#colgroup-compare'); 
} 

no puede utilizar jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); en su bucle porque eso sería añadir más cols en iteraciones> 0 ...

esto puede ser optimizado:

var $colgroup = $('#colgroup-compare'); // this saves the colgroup collection to avoid recomputing it later 
var $col = $colgroup.children("col"); // this makes the clonable col(s) from the col children of $colgroup 
for (var i=n; i-->0;){ // n times (from n-1 to 0) 
    $colgroup.append($col.clone()); // append a clone of the col(s) 
} 

EDITAR: para contar el th en su primera fila, puede hacer esto:

var n=$("tr").first().children('th').length; 

(esto evitar el recuento de más de una fila)

Demonstration

Answer 2

utilizar un bucle for:

for(var i = 0; i < n; i++){ 
    jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); 
} 

Esto fue rápido y sucio, y yo no pensó en las consecuencias de almacenamiento en caché. la solución de dystroy es mejor.

Answer 3

Si no desea que los clones de profundidad, entonces se puede evitar la repetición manual de pasando el outerHTML del elemento a un matrices join() método que resulta en un HTMLString correspondiente a n número de elementos como se muestra a continuación:

var elementString = new Array(++n).join($(selector).get(0).outerHTML) 

que puede anexar a cualquier elemento que se desea.

---

En su caso, usted puede hacer:

var n= $("tr > td").length, 
$colgroup = $("#colgroup-compare"); 
$colgroup.append(new Array(++n).join($colgroup.find("col").get(0).outerHTML));