Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite

I want to clone every element at .dynamic-content1 and automatically increment itself and every id of it's children to make it unique and also can remove the last cloned .dynamic-content, the following code are:

<div class="dynamic-content1">
<div class="dynamic-wrapper">
<p><strong>Child | 1</strong></p>
<div class="dynamic-row">
<label>Fullname</label>
    <div class="right">
        <input type="text" name="chname1" id="chname1" />
    </div>
</div>

<div class="dynamic-row">
<label>Place of Birth</label>
    <div class="right">
        <input type="text" name="chpob1" id="chpob1" />
    </div>
</div>

<div class="dynamic-row">
<label>Date of Birth</label>
    <div class="right">
        <input type="text" class="datepicker" id="chdate1" name="chdate1" />
    </div>
</div>

<div class="dynamic-row">
<label>Highest Education</label>
    <div class="right">
        <input type="text" name="chedu1" id="chedu1" />
    </div>
</div>

<div class="dynamic-row">
<label>Occupation</label>
    <div class="right">
        <input type="text" name="chocc1" id="chocc1" />
    </div>
</div>
</div>
</div>

the .dynamic-wrapper and .dynamic-row just for styling purpose.

Actually I already can do this, but in a very very dirty way and not very effective, is there anyway you guys can show me using .clone()? Already cracking skull here. :)

My way to achieve this: http://jsfiddle.net/R2c5K/

share|improve this question
I'm not sure I get the problem. Are you using clone ? – dystroy Dec 5 '12 at 12:31
No, actually I'm using the tutorial at mkyong.com/jquery/… after using the tutorial I see my code takes too many lines, and looking for alternative using clone. – Xtrader Dec 5 '12 at 12:33
Should this really have been migrated from SO ? – dystroy Dec 5 '12 at 13:59
I don't think it should have been migrated, but it fits here in CR as well. – ANeves Dec 5 '12 at 16:49

migrated from stackoverflow.com Dec 5 '12 at 13:46

1 Answer

up vote 3 down vote

Making the clone is simple :

var $clone = $('.dynamic-content1').clone();

To change the id of the cloned elements, you could do this :

$clone.find('[id]').each(function(){this.id+='someotherpart'});

Demonstration (open the console to check the id)

share|improve this answer
Hmm, I'm still a bit confused while modifying it to be what i wanted to, can you look into my working code without clone? What I want to achieve is looks like this jsfiddle.net/R2c5K – Xtrader Dec 5 '12 at 13:16
I made a new version : jsfiddle.net/nJBRd. When you clone an object multiple time, you have to pay attention to cloning only the first one (hence the :eq(0)). – dystroy Dec 5 '12 at 13:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.