如何克隆（）一个元素n次？答案

【问题标题】：How to clone() a element n times?如何克隆（）一个元素n次？
【发布时间】：2012-10-11 08:44:08
【问题描述】：

我有一个动态表，我想用 jQuery 附加 <col> 元素。

我有这个：

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

显然这只会附加 1 个<col>，我想附加 (n) 个数字。我该怎么做？

我有长度，我有分身能力，现在怎么结合？

【问题讨论】：

标签： jquery clone

【解决方案1】：

有一个循环：

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 时附加更多列...

这可以优化：

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

【讨论】：

好点，但选择器结果的缓存可能更多。
@Tadeck 为什么不这样做，但这对于小的 n 并不那么重要（document.getElementById 很快），这会使代码的可读性降低。但我同意这是可以做到的。
@Tadeck 我做了一个新版本：你更喜欢它吗？
谢谢，但您能帮我扩展一下这个答案吗？我是 javascript 的新手（和 stackoverflow，该死的答案来得很快），这很快就变得复杂了。我做了一些快速研究，each() 似乎是 jQuery 等价物。编辑：您似乎开始计算 col 元素，而我需要先计算 td 元素，以便我可以在之后附加 col！？
@SazzadTusharKhan 不，因为一个元素不能同时在两个地方。附加它时，会将其从其他位置移除。

【解决方案2】：

如果您不想要深度克隆，则可以通过将元素的 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));

【讨论】：