如何克隆（）一個元素n次？

我有一個動態表，我想用jQuery附上<col>元素。如何克隆（）一個元素n次？

我有這樣的：

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

顯然，這只是追加1 <col>，我要追加（n）的數字。我將如何做到這一點？

我有長度，我有克隆能力，現在我該如何組合呢？

來源

2012-10-11 user1737413

爲什麼不是循環？ –

有了一個循環：

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

你不能在你的循環使用jQuery("#colgroup-compare > col").clone().appendTo('#colgroup-compare');，因爲這將在迭代> 0追加更多的cols ...

這可以進行優化：

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

編輯：在您的第一排中計數th，您可以這樣做：

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

（這避免計算上多於一行）

Demonstration

來源

2012-10-11 08:47:26

好點，但也許更多緩存選擇器的結果。 – Tadeck

@Tadeck爲什麼不這樣做，但是這對於一個小的n（document.getElementById很快）來說並不那麼重要，這會使得代碼的可讀性降低。但我同意這可以做到。 –

@Tadeck我做了一個新版本：你喜歡它更好嗎？ –

使用for循環：

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

這是快速和骯髒的，我沒有想到過緩存的影響。 dystroy的解決方案更好。

來源

2012-10-11 08:45:58 MassivePenguin

也許使用一些緩存？ – Tadeck

如果你不希望深克隆，那麼可以通過使元件的outerHTML到陣列避免了人工迭代join()方法導致在對應於n數元件的HTMLString，如下所示：

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

其可以追加到希望的任何元件。

在你的情況，你可以這樣做：

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

來源

2014-11-11 18:53:01

如何克隆（）一個元素n次？

回答

相關問題