如何克隆()一个元素n次?

时间:2012-10-11 08:44:08

标签: jquery clone

我有一个动态表,我想用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)数字。我该怎么做?

我有长度,我有克隆能力,现在我该如何组合呢?

2 个答案:

答案 0 :(得分:6)

循环:

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');,因为这会在迭代时附加更多cols&gt; 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

答案 1 :(得分:0)

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