克隆表单并增加 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并添加新的idfieldname1, fieldname2然而，我对 jQuery 的了解并不是太多，这个项目几乎要了我的命。

任何帮助都会很棒！

你会clone()它，在将克隆的元素附加到 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++;
    };

})();

jsFiddle.

这一个开始于0，但你可以轻松开始count with 1.

您还可以使用closure如果你愿意的话，即

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');

jsFiddle.