在 JQuery 中克隆并为每个添加唯一 ID答案

【问题标题】：Clone in JQuery and adding unique IDs for each在 JQuery 中克隆并为每个添加唯一 ID
【发布时间】：2012-01-03 12:00:28
【问题描述】：

我正在创建一个简单的网络应用程序，用户可以在其中使用；从下拉框中进行选择并输入一些文本。完成后，用户按下“生成”按钮，将向他们显示生成的连接字符串（显示在 <span> 中），然后用户可以复制和粘贴。我已经让它工作一排没问题。

但我现在想要实现的是有一个“添加行”按钮，用户可以单击该按钮，它将复制上面的行。我遇到的问题是确保在复制行并单击生成按钮后，复制的<span> 将填充与之前的<span> 相同的值。

更新：所以我设法使用 JQuery 中的 clone() 函数来复制行并将其附加到下面。是否可以更改复制的每个元素的 ID，包括表单的 ID。也就是说，当它被复制时，它被复制到的表单将被称为“Form1”

我所拥有的 JS Fiddle 在这里：

http://jsfiddle.net/XJEAn/

更新 2：本质上我需要类似于 this 的东西，但对于我尝试过的代码！

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

我已经更新了你的小提琴，为新表单提供了唯一的 ID

http://jsfiddle.net/zq3AN/

它可能并不完美，但应该能让你朝着正确的方向前进。

var uniqueId = 1;
$(function() {
     $('.addRow').click(function() {
         var copy = $("#original").clone(true);
         var formId = 'NewForm' + uniqueId;
         copy.attr('id', formId );


         $('#campaign').append(copy);
         $('#' + formId).find('input,select').each(function(){
            $(this).attr('id', $(this).attr('id') + uniqueId);

         });
         uniqueId++;  
     });
});

基本上你复制表单，更改它的 id，并将其附加到 div。然后您查看所有输入并选择并将相同的 uniqueId 参数附加到它们的 id。

【讨论】：

刚刚仔细看了一下这个。所以感谢@Patricia，这有效并且功能在那里。解决了我一整天都在尝试纠正的问题 - 谢谢！ :)

【解决方案2】：

我认为您可以使用jQuery clone() function 来实现您的“添加行”功能。

查看最后一个示例，为每个新行指定一个唯一的 id。

【讨论】：