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属性中重复的那些，我怎么能以另一种方式选择它（提到：我真的需要使用'this '因为我在3个地方需要这个小脚本，所以我不想为具有特定id / class的元素编写它。

另外，我只计算具有基本名称属性的元素，所以.lenght yelds 1一直在计算，我将如何计算所有这些？我想我必须将它们放在另一个div或者其他东西中，但我不知道即使在那时我也会怎么去兜售它们。

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

我很感激任何帮助。感谢。

Answer 1

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

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

更新

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

BTW，主要是id应该是唯一的，因此克隆组件中的子元素应该使用其他属性，如class或某些data-属性，就像在更新了小提琴。

另外，您可能需要在点击event.preventDefault()

时致电<a>

Answer 2

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

$(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执行相同操作，例如添加数字。如果必须对所有名称属性执行相同操作，则取决于您要完全执行的操作。如果你必须区分我建议的第一个和第二个输入，你也必须改变它们。

Answer 3

尝试使用cloneJs，它的克隆id，名称输入和输入的函数id里面的参数必须像id_foo_1，id_foo_2 ,,,,和name就像inputName [0] [foo]，inputName [ 1] [foo] https://github.com/yagami271/clonejs

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

3 个答案:

更新