Javascript 克隆表单和增量ID

考虑以下形式：

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" id="file"/>
    <input type="hidden" id="hidden"/>
    <input type="image" id="image" />

    <input type="password" id="password" />
    <input type="radio" id="radio" />
    <input type="reset" id="reset" />
</form>

利用Javascript（和jQuery），克隆整个表单并增加其中的每个id以确保唯一性的最简单方法是什么

使用jQuery，我假设您最初会通过

clone（）

克隆表单，并遍历克隆的对象

id

，然后添加新的id

fieldname1

，

fieldname2

等。但是，我对jQuery的了解不是太多，这个项目几乎要了我的命

任何帮助都会很好

您可以使用它，在将克隆的元素附加到DOM之前，您需要遍历并将编号添加到每个

id

属性中

(function() {
    var count = 0;

    window.duplicateForm = function()

        var source = $('form:first'),
            clone = source.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + count;
        });

        clone.appendTo('body');

        count++;
    };

})();

这一个从

0

开始，但是您可以很容易地从

1

开始

count

如果你想的话，你也可以使用

var cloneForm = function(form, start) {
   start = start || 0;

   return function() {
        var clone = form.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + start;
        });
        start++;

        return clone;
    };
};

那你就

var cloneContactForm = cloneForm($('#contact-form'), 5);

// Now I want to clone it and put it somewhere.
$(cloneContactForm()).appendTo('body');

---

.

这里有一个不更新任何ID的解决方案：

为所有表格指定相同的

类别

为所有字段指定一个

名称

引用与类中的所有表单相关的克隆表单

引用具有名称的字段

例如： 给每个克隆的表单一个不同的id，然后对每个输入元素使用

name

s，怎么样

<form class="theForm">
    <input type="password" name="password" />
</form>

（或将第一个表单缓存在变量中）

最后，使用以下命令访问输入字段：

$('form.theForm:eq(0) [name=password]') // password from first form
$('form.theForm:eq(1) [name=password]') // password from second form
...

如果选择器查找效率是这里的一个因素，那么有几种简单的方法来加速它，例如使用不同的形式缓存变量、缓存

$（'.theForm'）

和使用该方法等

---

示例jsiddle在这里：

@nickf:我需要将来自多个表单的多个值合并并混合，作为输出的一部分。我认为IDs是获取这些值的最佳方式。此外，通过

id

属性，IMO将

label

元素与

input

元素链接起来要容易得多。是否有理由不使用：var clone=$（'form:first'）。clone（）；不是创建源变量？@Steve该变量是不必要的，我只是想我会使用它，这样选择器会更明显。@karim79非常感谢@ÁlvaroG.Vicario

id

属性需要将

标签

s与其输入链接起来（而不使输入成为

标签

的后代）。@alex-有趣的评论，考虑到问题中的代码没有一个标签：）

$('form.theForm:eq(0) [name=password]') // password from first form
$('form.theForm:eq(1) [name=password]') // password from second form
...