How to clone an HTML block?

Question

I'm struggling with the Jquery clone. I can clone a single line of HTML, but I don't have a clue on how to clone a block.

I have this block:

<div class="item-name">
    <label for="id_form-0-name"></label>
    <select id="id_form-0-name" name="form-0-name"></select>
</div>

And I need to produce more two blocks, each time changing the attributes of the new block to reflect its position.

<div class="item-name">
    <label for="id_form-1-name"></label>
    <select id="id_form-1-name" name="form-1-name"></select>
</div>
<div class="item-name">
    <label for="id_form-2-name"></label>
    <select id="id_form-2-name" name="form-2-name"></select>
</div>

Any clue on what I've to do to obtain that output?

Please show your JS code. – Diodeus - James MacFarlane Jan 10 '13 at 18:07 — Diodeus - James MacFarlane, Jan 10 '13 at 18:07

Bogdan Burym · Accepted Answer · 2013-01-10T18:34:29.313

3

Try this:

$('.item-name').clone().insertAfter('.item-name')

Source:

1) About clone() http://api.jquery.com/clone/
2) About insertAfter http://api.jquery.com/insertAfter/

FOR YOUR ADDITIONAL REQUEST

Try something like this:

$clone = $('.item-name:last').clone();
for (i = 1; i < 999; i++) {
    if ($('.item-name select[id=id_form-'+i+'-name]').attr('id') != 'id_form-'+i+'-name') {
        $clone.find('select').attr('id', 'id_form-'+i+'-name');
        $clone.find('select').attr('name', 'form-'+i+'-name');
        $clone.find('label').attr('for', 'id_form-'+i+'-name');
        break;
    }
}
$clone.insertAfter('.item-name:last');

edited Jan 10 '13 at 18:34

answered Jan 10 '13 at 18:08

Bogdan Burym

5,482
2
27
46

It is cloning. And how can I produce the new attribures for the "for", "id" and "name"? Best Regards, – André Jan 10 '13 at 18:12
you mean you need to find the `eq` and change the attributes as well as clone the block – Popnoodles Jan 10 '13 at 18:17
@André I have modified my answer. Try now. – Bogdan Burym Jan 10 '13 at 18:38

score 1 · Answer 2 · answered Jan 10 '13 at 18:08

1

Try this (cloning it twice):

$('.item-name:last').clone().insertAfter($('.item-name:last')).clone().insertAfter($('.item-name:last'));

answered Jan 10 '13 at 18:08

techfoobar

65,616
14
114
135

score 0 · Answer 3 · answered Jan 10 '13 at 18:32

Working demo

So clone it and increment the attributes. You can do it in one line but to make it easy to follow:

var clone=$('.item-name:last').clone();
clone.insertAfter('.item-name:last');
var attrs='id_form-' + clone.index() + '-name';
clone.find('label').attr('for', attrs);
clone.find('select').attr({id: attrs, name: attrs});

How to clone an HTML block?

3 Answers3