ein DIV mit jQuery

Question

Klonen habe ich folgende 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"); 

Innerhalb einer .click() Funktion. Das funktioniert gut. Allerdings habe ich den folgenden HTML-Code in dem geklonten Bereich:

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

nun in die oben jQuery ich this.checked=false; habe, das jede geklonte Checkbox deaktiviert macht. Aber leider Die label.button-array hat immer noch die Klasse von active, die es immer noch bedeutet, sieht aus wie es aktiviert ist. So

Ich veränderte meine jQuery-Funktion so aussehen:

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

Beachten Sie die neue find() Funktion auf den ersten hinzugefügt. Es scheint jedoch, den gesamten HTML aus dem Klon vollständig zu entfernen, und ich am Ende mit ein paar Eingabefelder und das ist es. Ich kann nicht herausfinden warum.

In diesem Bild, das Sie den ersten geklonten Bereich sehen kann, und dann nach dem Drücken der Taste (mit der neuen find() Funktion hinzugefügt, wie oben dargestellt):

Helfen Sie mir Stack-Überlauf Sie, bin meine einzige Hoffnung.

Answer 1

Sie vermissen eine .end().

Sie haben also mit der ersten Auswahl (Eingabe) gearbeitet, was bedeutet, dass Sie anstatt die geklonten div.duplicate-Felder an # duplicate-section anzuhängen, stattdessen Ihre Sammlung von Eingaben an # duplicate-section angehängt haben (was erklärt die fünf Kontrollkästchen)

Versuchen Sie, Ihren zweiten Block mit diesem

$("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 ersetzen - http://www.bootply.com/bPwHVfFzK8

Answer 2

Try this:

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

Da Sie bereits jedes Eingabeelement Looping, können Sie versuchen, .parent $() zu verwenden, um das Etikett zu erhalten, dann seine Klasse bearbeiten.

So etwas wie

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