CODEWITHSUNDEEP
jqueryclone
user1737413
user1737413

Reputation: 105

How to clone() a element n times?

I have a dynamic table that I want to attach <col> elements with jQuery.

I have this:

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

Obviously this only appends 1 <col>, I want to append (n) numbers. How would I do this?

I have the length, I have the clone ability, now how do I combine it?

Upvotes: 9

Views: 7795

Answers (2)

T J
T J

Reputation: 43156

If you don't want deep clones, then you can avoid the manual iteration by passing the outerHTML of the element to an arrays join() method resulting in an HTMLString corresponding to n number of elements as shown below:

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

which you can append to any element you wish.

In your case you can do:

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

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

With a loop :

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

You can't use jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); in your loop because that would append more cols at iterations > 0...

This can be optimized :

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

EDIT : to count the th in your first row, you may do this :

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

(this avoid counting on more than one row)

Demonstration

Upvotes: 7

Related Questions