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

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

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

我用这里得到的设置了一个JSFIDLE：

现在，我使用.prev来选择要克隆的元素，这会导致id/name属性中重复出现1，我怎么能用另一种方式来选择它呢？我真的需要使用'this'，因为我需要在3个地方使用这个小脚本，所以我不想为具有特定id/类的元素编写它

另外，我只计算具有base name属性的元素，所以。lenght yelds 1一直在计算，我如何计算所有元素？我想我必须把它们放在另一个部门或别的什么地方，但我不知道即使在那时我该怎么做

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

---

我非常感谢你的帮助。谢谢。

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

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

使现代化 模板的演示方式：，尽管调整代码以克隆已经存在的第一个组件非常容易

顺便说一句，id基本上应该是唯一的，因此克隆组件中的子元素应该使用其他属性，比如类或某些数据属性，比如更新的fiddle中使用的属性

---

此外，您可能希望在单击某个

时调用event.preventDefault，因为它仍然附带了号码，因此您正在使用错误的名称进行搜索。所以首先删除它，搜索具有以该名称开头的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执行相同的操作，比如添加一个数字。如果必须对所有名称属性执行相同的操作，则取决于您想要执行的操作。如果您必须区分第一个输入和第二个输入，我建议您也必须更改它们。

尝试使用cloneJs，它是克隆id、名称输入和参数。函数中输入的id必须像id\u foo\u 1、id\u foo\u 2、、、和名称像inputName[0][foo]，inputName[1][foo]

这是一个很好的答案，如果您编辑OP的JSFIDLE来证明您的答案是有效的，那么我将+1答案。我会继续看这篇文章，手指按+1键…@gibberish，fiddle更新以演示模板部分。实际上，我从上面选择的模板中挖掘了更多的内容，我只是觉得它更直观，更容易理解。谢谢你的回答。谢谢你的回答，它很有魅力，你的想法也很好。关于最后一部分，我想从每个输入中获取值，然后将它们ajax到一个php文件并获得结果。所以基本上我只需要把每个值赋给一个变量。我想我可以用$'div rank\u ability1 ability'之类的东西来选择它们，应该没问题。我现在就到此为止，明天见。

$(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);
    });
});