jquery clone object issue

Question

I am cloning following div and I want to create newids on every clone. and it is doing like that but it is creating div as separate and inputs as separate out side div and all design messup. I want following div_ clone withall inputs should appear in other div container.

HTML

<div id="div_" style="display: none;" class="well form-inline">
    <label>Label :</label>    <input type="text"  id="txtlabel" name="txtlabel" />
    <label>value :</label>    <input type="text"  id="txtvalue" name="txtvalue" />
    <label>Selected :</label> <input type="checkbox" name="chk_sel" value="chk_sel" />
    <label>Required :</label> <input type="checkbox" name="chk_isreq" value="chk_isreq" />
</div>

jQuery

var = question_cnt=1;
$("#div_").clone().find("input,label").andSelf().each(function() {
    $(this).show();
    $(this).attr('id', this.id +question_cnt );
    $(this).attr('name', this.name +question_cnt );
}).appendTo("#container").end();
question_cnt++;

For starters, you're creating duplicate id's. question_cnt is not changed for every iteration of each() — Philippe Leybaert
– Philippe Leybaert, Commented Jun 28, 2012 at 7:11
thats not a issue, ids are unique on every clone issue is inputs are appearing out side of div_. inputs should be in div_. — user493550
– user493550, Commented Jun 28, 2012 at 7:15
If they're meant to appear inside div_, why are you appending them to #container? — Jezen Thomas
– Jezen Thomas, Commented Jun 28, 2012 at 7:17
Really? Duplicate id's are definitely an issue in your code (although I'm not saying that your problem is caused by that) — Philippe Leybaert
– Philippe Leybaert, Commented Jun 28, 2012 at 7:18

Jared Farrish · Accepted Answer · 2012-06-28 07:24:15Z

1

I think this is probably what you're trying to do, although I'm puzzled by looping through the labels too? They don't have id's or name's, or even for's, which would make sense. Why loop over those?

$(document).ready(function(){
    var $underscore = $("#div_"),
        question_cnt = 0;

    function clone() {
        var $clone = $underscore.clone();

        $clone
            .find("input, label")
            .each(function() {
                $(this)
                    .attr({
                        id: this.id + question_cnt,
                        name: this.name + question_cnt
                    });       
            });

        $clone
            .appendTo("#container")
            .show();

        question_cnt++;
    }

    $('#cloneit').click(clone);
});

http://jsfiddle.net/userdude/M2xjp/

answered Jun 28, 2012 at 7:24

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jared Farrish Over a year ago

Looking at it, how do think you would? I can tell you, but try first. Then I'll give an answer. And what is the deal with the label attributes?

user493550 Over a year ago

$clone.attr('id', this.id + question_cnt ); this is working fine. and label was added just mistakenly :). thanks for your help.

Jared Farrish Over a year ago

Not quite. Take a look at the handler again.

user493550 Over a year ago

but what was wrong with my code why it was putting div_ as seperate and inputs as seperate ?

Jared Farrish Over a year ago

Take a look at this: jsfiddle.net/userdude/M2xjp/1 this.id in the clone() handler context points at the button, not the $clone. You were trying to pack too much action into one little block. Don't get worked up about chaining like mad and "doing it all in one line". Lay your code out where you can read it and do bite-sized things a step at a time.

|

Collectives™ on Stack Overflow

jquery clone object issue

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related