使用jQuery克隆一个DIV

Question

我有以下JavaScript代码：

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
}).removeClass("active").end().appendTo("#duplicate-section");

在.click()函数内部。这个很好用。然而，我在克隆区域中有以下HTML：

<div class="btn-group" data-toggle="buttons"><label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][1]" value="">Session 1</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][2]" value="">Session 2</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][3]" value="">Session 3</label>
<label class="btn btn-default button-array "><input type="checkbox" name="select-sessions[3][4]" value="">Session 4</label>
<label class="btn btn-default button-array active"><input type="checkbox" name="select-sessions[3][5]" checked="" value="">Session 5</label>
</div>

现在，在上面的jQuery中，我有this.checked=false;，这会使任何克隆的复选框未被选中。但不幸的是，label.button-array仍然具有active类，这意味着它看起来仍然被选中。

因此，我修改了我的jQuery函数如下：

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
}).find("label.button-array.active").each(function() {
    $(this).removeClass("active");
}).end().appendTo("#duplicate-section");

注意第一个函数中添加的新的find()函数。然而，它似乎完全删除了克隆的HTML，最终只剩下几个输入框。我无法弄清楚原因。

在这张图片中，你可以看到第一个克隆区域，然后按下按钮后（使用上面添加的新的find()函数）：

帮帮我 Stack Overflow，你是我的唯一希望。

- Chud37

---

请提供一个类似于您遇到的问题的 Fiddle。 - ebilgin

Answer 1

你缺少了一个.end()。

所以你正在操作第一个选择（输入），这意味着你没有将克隆的div.duplicate-fields附加到#duplicate-section，而是将输入集合附加到#duplicate-section（这就解释了五个复选框）

尝试用以下代码替换你的第二个块：

$("div.duplicate-fields:last-child").clone().find('input').each(function () {
    this.name = this.name.replace(/\[(\d+)\]/, function (str, p1) { return '[' + (parseInt(p1, 10) + 1) + ']' });
    this.value = "";
    this.checked = false;
}).end().find("label.button-array.active").each(function () {
    $(this).removeClass("active");
}).end().appendTo("#duplicate-section");

---

Bootply - http://www.bootply.com/bPwHVfFzK8

- potatopeelings

---

这个方法可行，同时也解释了为什么我的第一次尝试失败了。我怀疑我需要像这样的东西，但是我对find()不够了解，无法实现它。谢谢！ - Chud37

如果您能解释一下上面的图片以及我为什么会得到那些结果，那就太好了。 - Chud37

完成（第二段），如果不清楚，请告诉我。谢谢！ - potatopeelings

Answer 2

由于您已经循环遍历每个输入元素，可以尝试使用$.parent()来获取标签，然后编辑其类。

类似以下内容：

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
    $(this).parent().removeClass("active");
}).end().appendTo("#duplicate-section");

- MarcoReni

---

谢谢！这个很好用。我没有将其标记为答案，因为它没有解释为什么会发生这种情况。但是非常感谢你的帮助。 - Chud37

Answer 3

试试这个：

$("div.duplicate-fields:last-child").clone().find('input').each(function() {
    this.name = this.name.replace(/\[(\d+)\]/,function(str,p1){return '[' + (parseInt(p1,10)+1) + ']'});
    this.value = "";
    this.checked = false;
    $(this).parent("label.button-array.active").removeClass("active");
}).removeClass("active").end().appendTo("#duplicate-section");

- Pete