jquery - 如何克隆（）一个元素n次？

Question

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

我有这个：

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

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

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

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;

（这避免了多于一排）

示范

Answer 2

如果您不想要深度克隆，则可以通过将元素的outerHTML传递给数组join()方法来避免手动迭代，从而生成与元素数量相对应的 HTMLString n，如下所示：

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