克隆形式和增量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