用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，你是我唯一的希望。

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

Answer 2

试试这个：

$("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");

Answer 3

由于您已经循环每个输入元素，您可以尝试使用$ .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");