javascript - 使用 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(这解释了五个复选框)

尝试用这个替换你的第二个 block

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