如何将一个元素克隆（clone）n次？

Question

我有一个动态表格，我想用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)个数字。我该如何做？

我已经有长度和克隆能力了，现在怎么合并它们呢？

- user1737413

Answer 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;

(这样可以避免依赖于多行)

演示

- Denys Séguret

---

不错的建议，但或许可以更多地缓存选择器的结果。 - Tadeck

@Tadeck 可以，但是对于小 n 来说这并不是很重要(document.getElementById 很快)，而且这会使代码不太易读。但是我同意这可以实现。 - Denys Séguret

@Tadeck 我做了一个新版本：你喜欢它更多吗？ - Denys Séguret

感谢您的详细帮助和耐心，现在它已经可以工作了！ - user1737413

@SazzadTusharKhan 不可以，因为一个元素不能同时存在于两个位置。当你将它附加到另一个位置时，它就会从原来的位置被移除。 - Denys Séguret

Answer 2

如果不想进行深拷贝，可以通过将元素的outerHTML传递给数组的join()方法来避免手动迭代，从而得到与下面显示的n个元素对应的HTML字符串：

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

- T J