Làm thế nào để sao chép() một phần tử n lần?

Question

Tôi có một bảng động mà tôi muốn đính kèm các phần tử <col> với jQuery.

Tôi có điều này:

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

Rõ ràng đây chỉ gắn thêm 1 <col>, tôi muốn thêm (n) số. Làm thế nào tôi sẽ làm điều này?

Tôi có độ dài, tôi có khả năng sao chép, bây giờ làm cách nào để kết hợp nó?

Answer 1

Với một vòng lặp:

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

Bạn không thể sử dụng jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare'); trong vòng lặp của bạn bởi vì đó sẽ nối thêm cols tại lần lặp> 0 ...

Điều này có thể được tối ưu hóa:

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: để đếm số th trong hàng đầu tiên của bạn, bạn có thể thực hiện việc này:

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

(tránh này đếm trên nhiều hơn một dòng)

Demonstration

Answer 2

Sử dụng một vòng lặp for:

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

này đã nhanh chóng và dơ bẩn, và tôi đã không suy nghĩ thấu đáo ý nghĩa bộ nhớ đệm. giải pháp của dystroy là tốt hơn.

Answer 3

Nếu bạn không muốn bắt chước sâu, sau đó bạn có thể tránh lặp thủ công bằng cách truyền outerHTML của nguyên tố này với một mảng join() phương pháp dẫn đến một HTMLString tương ứng với n số yếu tố như hình dưới đây:

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

mà bạn có thể thêm vào bất kỳ yếu tố mà bạn muốn.

---

Trong trường hợp của bạn, bạn có thể làm:

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