Jak klonować() element n razy?

Question

Mam tabeli dynamiczne, które chcę dołączyć elementy <col> z jQuery.

mam to:

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

Oczywiście to tylko dodaje 1 <col>, chcę dołączyć (n) liczb. Jak to zrobić?

Mam długość, mam zdolność klonowania, teraz jak ją połączyć?

Answer 1

z pętlą:

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

nie można używać jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); w pętli bo byłoby dołączać kolejne cols w iteracji> 0 ...

To może być zoptymalizowane:

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

EDYCJA: aby policzyć th w pierwszym rzędzie, możesz to zrobić:

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

(to uniknąć licząc na więcej niż jednym rzędzie)

Demonstration

Answer 2

Użyj for pętlę:

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

To było szybkie i brudne, a ja nie przemyśleć konsekwencje buforowania. Rozwiązanie dystroya jest lepsze.

Answer 3

Jeśli nie chcesz głębokie klonów, wtedy można uniknąć ręcznego iteracji przez przepuszczenie outerHTML elementu do tablic join() sposób powodując HTMLString odpowiadającej n liczba elementów, jak pokazano poniżej:

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

które można dołączyć do każdego elementu, który ma.

---

w twoim przypadku można zrobić:

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