如何克隆（）一个元素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次？

回答

相关问题