Wie klon() ein Element n mal?

Question

Ich habe eine dynamische Tabelle, die ich <col> Elemente mit jQuery anfügen möchte.

Ich habe dies:

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

Offensichtlich hängt nur 1 <col>, ich möchte Nummern anhängen (n). Wie würde ich das tun?

Ich habe die Länge, ich habe die Klonfähigkeit, jetzt, wie kombiniere ich es?

Answer 1

Mit einer Schleife:

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

:

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

Sie nicht jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); in der Schleife verwenden können, weil das mehr cols an Iterationen> 0 anhängen würde ...

Dies kann optimiert werden

EDIT: die th in Ihrer ersten Reihe zu zählen, können Sie dies tun:

(dies zu vermeiden zählen auf mehr als eine Zeile)

Demonstration

Answer 2

eine for Schleife verwenden:

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

Diese schnelle und schmutzig war, und ich glaube nicht, durch die Caching Auswirkungen. Dystroys Lösung ist besser.

Answer 3

Wenn Sie nicht tief Klone wollen, dann können Sie die manuelle Iteration vermeiden, indem die outerHTML des Elements zu einem Arrays vorbei join() Verfahren, was zu einer HTMLString zu n Anzahl der Elemente entspricht, wie unten gezeigt:

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

das Sie auf jedes Element anhängen können Sie möchten.

---

In Ihrem Fall können Sie tun:

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