jquery - 如何克隆 HTML block ？

Question

我正在努力使用 Jquery 克隆。我可以克隆一行 HTML，但我不知道如何克隆一个 block 。

我有这个 block :

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

我需要生成另外两个 block ，每次更改新 block 的属性以反射(reflect)其位置。

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

关于我必须做什么才能获得该输出的任何线索吗？

Answer 1

试试这个:

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

来源:

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

满足您的额外要求

尝试这样的事情:

$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');