克隆形式和增量ID

Question

请看下面的表格：

<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的知识不是太大，这个项目几乎是杀了我。

任何帮助将是伟大的！

Answer 1

你会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与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。

Answer 2

这里有一个解决方案，而无需更新任何标识：

1. 给所有形式相同class
2. 给所有领域name
3. 指相对于所有带班形式克隆的形式
4. 请参考字段

示例： 如何为每个克隆表单分配一个不同的ID，然后使用每个输入元素的name？

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

然后用

container.append($('.theForm:first').clone()); 

克隆它（或缓存在可变的第一种形式）。

最后，进入输入的字段：

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

如果选择查找的效率是这里的因素则有几个微不足道的方式来加速这一过程，比如用不同形式的缓存变量，缓存$('.theForm')并使用eq()等方法

样品的jsfiddle是在这里：http://jsfiddle.net/orip/dX4sY