Geek Answers Handbook

Cloning a DIV with jQuery

I have the following 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");

Inside the .click() function. It works great. However, I have the following HTML in the cloned area:

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

Now, in the jQuery above, I have this.checked=false; which blocks any cloned flag. But unfortunately, label.button-array still has an active class, which means that it still looks like it has been checked.

So, I modified the jQuery function as follows:

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

Note that the new find() function is added to the first. However, it seems that it completely removes all the HTML from the clone, and in the end I get a few input fields and something about it. I can’t understand why.

In this image you can see the first cloned area, and then after clicking the button (with the find() function added, as shown above):

I just ended up with raw input fields

Help me stack overflow, you are my only hope.

+5
source share
3 answers

You are missing .end() .

So, you used the first selection (input), which means that instead of adding the cloned div.duplicate fields to # duplicate-section, you instead added your collection of inputs to the # duplicate section (which explains the five flags)

Try replacing the second block with

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

+3
source

Try the following:

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

Since you are already looping over each input element, you can try using $ .parent () to get the label, and then edit its class.

Sort of

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

More articles:


All Articles