JQUERY：如何自动更改克隆对象的名称和 ID？ [复制]答案

【问题标题】：JQUERY: how do I automatically change the name and id of cloned objects? [duplicate]JQUERY：如何自动更改克隆对象的名称和 ID？ [复制]
【发布时间】：2015-11-21 04:56:13
【问题描述】：

我想用 jquery 克隆一个完整的 div。我删除了克隆部分，但是当我选择单选按钮时，我注意到它只会从所有克隆中选择一个选项，这会立即告诉我它们仍然拥有与原件相同的名称和 ID。

现在我已经开始思考了，我想更改这些元素的名称和 ID，方法是保持相同的名称，并在每次克隆时在末尾添加“02,03,04”，否则一旦有人提交我不知道哪些答案最初属于哪些元素。

这是一个更简单的演示的小提琴，它代表了我试图操纵的结构。 https://jsfiddle.net/6djnv9u2/1/

这是我目前的编码。

$(document).ready(function(){
$("#dplct").click(function(){
    $("#container01").clone("*").appendTo("#page01").after("#container01");
    });
});

<form>
    <div id="page01">
        <div id="container01">
            <label for="fname">First Name</label>
            <input type="text" name="First name" id="fname">

            <label for="lname">Last Name</label>
            <input type="text" name="Last name" id="lname">

            <label for="stf">Stuff</label>
            <textarea name="stuff" id="stf"></textarea>

            <label for="dplct">Duplicate</label>
            <input type="button" name="Duplicate" id="dplct">

            <input  type="radio" name="1" value="1" id="q1a1">
            <input type="radio" name="1" value="2" id="q1a2">
            <input type="radio" name="1" value="3" id="q1a3">

            <label for="nxt">Next</label>
            <input type="button" name="Next" id="nxt">

       </div><!--container-->
    </div><!--page01-->
</form>

我浏览了网站的其余部分，发现了其他更改名称的示例，但没有一个我可以识别为保持相同的名称并添加到末尾以使它们独一无二，所以如果这里有什么可以显示的，请告诉我知道在我没有足够努力之前就知道了，老实说，我不知道从这里去哪里，也想不出任何更深层次的东西来补充这一点。我从这里去哪里？

【问题讨论】：

stackoverflow.com/questions/10126395/…
为什么是01、02、03 而不是简单的1、2、3？那0 有什么特别的吗？
还有，你到底为什么要复制？有一个 [Create New] 按钮不是更简单吗？这样，您只需创建一个空的新克隆。否则，通过“复制”，您将不得不删除不需要的名字、姓氏 - 您很容易误认为一个人，而另一个人的正确/错误答案是......
你也错过了在 Q 中解释这个 ID 的情况：q1a1
经过一番思考 - 您的程序逻辑完全关闭（如果您只是构建一个将由一个人使用的问卷）...

标签： jquery clone rename

【解决方案1】：

您的问题与：How to JQuery clone() and change id

让我们看看你的主要错误：

您不需要根本不需要任何 ID（container1 除外，如果您真的需要它...（我看不出任何原因））。（所以您根本不需要增加 ID！是的）您的页面中肯定不会有任何重复的 ID！
你知道如果你将你的动作元素包裹在标签内，label for 是不需要的吗？（完全正确！不再需要 ID！）
不要（避免）在name 属性中使用空格您所需要的只是一个数字后缀属性，例如name1 等 - 对于每个字段！（你错过了）
01 出于什么原因？使用1，顺其自然
重复字段？为什么不设置一个附加（创建）新的预置字段集的按钮？（否则如果用户克隆了一个人的字段，他应该手动删除所有老人的数据......一点都不好）

因此，以此 HTML 为起点，并使用上面链接中的信息：

<form>
    <div id="page1">
        <div id="container1">
            <label>
                First Name
                <input type="text" name="firstName1"/>
            </label>
            <label>
                Last Name
                <input type="text" name="lastName1"/>
            </label>
            <label>
                Stuff
                <textarea name="stuff1"></textarea>
            </label>
            <label>
                Next
                <input type="button" name="next1" />
            </label>
            <input type="radio" name="1" value="1" />
            <input type="radio" name="1" value="2" />
            <input type="radio" name="1" value="3" />
        </div>
        <!--container-->
    </div>
    <!--page01-->
</form>
<button id="createNew">Add new</button>

【讨论】：