如何克隆元素并生成动态ID

Question

我正在克隆一些表单元素，并希望为它们生成动态ID，以便以后可以访问它们的内容，但是我真的不知道如何做到这一点，顺便说一下，我对Jquery / Javascript还是个菜鸟。

我的html：

<tr>
<td>
<label for="ability">Ability</label><br>
    <div id="rank_ability" name="rank_ability">
        <select name="ability" id="ability">
            <option value=""></option>
            <option value="hexa">Test</option>
        </select><br>
        <label for="range_ability_min">Range:</label>
        <input type="textbox" name="range_ability_min" id="range_ability_min" class="small_text" value="0"  /> - 
        <input type="textbox" mame="range_ability_max" id="range_ability_max" class="small_text" value="0"  /><br>
    </div>
    <a href="#page" class="rank_clone">Add Ability</a><br><br>
</td>
</tr>

我的JS：

$(document).ready(function () {
    var element, ele_nr, new_id;
    $('.rank_clone').click( function() {
        element = $(this).prev();
        ele_nr = $('div[name="'+element.attr('name')+'"]').length;

        new_id = element.attr('name') + ele_nr;

        element.clone().attr('id', new_id).attr('name', new_id).insertAfter(element);
    });
});

我使用在这里得到的设置了一个jsfiddle： http : //jsfiddle.net/xjoo4q96/

现在，我正在使用.prev（）来选择要克隆的元素，该元素导致id / name属性中的那些重复的1，如何以另一种方式选择它（提及：我真的需要使用“ this”，因为我在3个地方需要这个小脚本，所以我不想为具有特定ID /类的元素编写它。

另外，我只计算具有base name属性的元素，因此.lenght始终产生1，我将如何计算所有这些呢？ 我想我必须将它们放在另一个div或其他东西中，但是即使那样，我也不知道该如何处理它们。

最后，我将如何改变div中具有的元素的所有name / id属性？

我将不胜感激。 谢谢。

Answer 1

您可以将模板放在#tmpl类的隐藏div中，然后克隆并设置id attr，例如

$('#tmpl').children().first().clone().appendTo('#target').attr('id', 'the_generated_id');

更新

模板方式的演示： http : //jsfiddle.net/xjoo4q96/1/ ，尽管调整代码以克隆已经存在的第一个组件非常容易。

顺便说一句，原则上， id应该是唯一的，因此克隆组件中的子元素应该使用其他属性，例如class或某些data-属性，例如更新的提琴中使用的那些属性。

另外，您可能想在单击<a>调用event.preventDefault()

Answer 2

您正在使用错误的名称进行搜索，因为它仍然附带数字。 因此，首先将其删除，搜索具有以该名称开头的名称属性的元素，然后使用该基本名称创建一个新的名称。

$(document).ready(function () {
    var element, ele_nr, new_id, base_name;
    $('.rank_clone').click( function() {
        element = $(this).prev();

        base_name = element.attr('name').replace(/[0-9]/g, '');

        ele_nr = $('div[name^="'+base_name+'"]').length;

        new_id = base_name + ele_nr;

        element.clone().attr('id', new_id).attr('name', new_id).insertAfter(element);
    });
});

并回答您的最后一个问题：您不能四处更改内部元素的所有ID，那将是无效的HTML。 原则上，您可以对每个ID进行相同的操作，例如添加数字。 如果必须对所有name属性执行相同操作，则取决于您要确切执行的操作。 如果您必须区分第一输入和第二输入（我建议），则也必须更改它们。

Answer 3

尝试使用cloneJs，它是克隆ID，名称输入和函数内部的参数输入的ID必须像id_foo_1，id_foo_2，...和name像inputName [0] [foo]，inputName [1] [foo] https： //github.com/yagami271/clonejs