用表单字段重复div

我有一个表单，我希望能够根据需要多次复制一组字段。 而且我还想让那些新字段组的属性的字段id ， name和标签增加1.我到目前为止用jQuery尝试了这个，并且至少复制了字段组，但是删除了没有不行。 而且我不确定如何为这三个属性中的每一个做+1。 我感谢任何帮助。

这是jsfiddle， http：//jsfiddle.net/Unfxn/

HTML

 
 
 Delete    
 Fighters  vs  
 
 Fighter Pay $  vs  
 
 Winner  
 
 Method  
 
 Method Type  
 
 Round  
 
 Time  
 
 Fight #  
 
 
 Add Fight 
 
  
  

JS

 // Add a new repeating section $('.addFight').click(function(){ var lastRepeatingGroup = $('.repeatingSection').last(); lastRepeatingGroup.clone().insertAfter(lastRepeatingGroup); return false; }); // Delete a repeating section $('.deleteFight').click(function(){ $(this).parent('div').remove(); return false; }); 

Answer 1

这应该根据所有三个元素自动重命名：

 // Add a new repeating section $('.addFight').click(function(){ var currentCount = $('.repeatingSection').length; var newCount = currentCount+1; var lastRepeatingGroup = $('.repeatingSection').last(); var newSection = lastRepeatingGroup.clone(); newSection.insertAfter(lastRepeatingGroup); newSection.find("input").each(function (index, input) { input.id = input.id.replace("_" + currentCount, "_" + newCount); input.name = input.name.replace("_" + currentCount, "_" + newCount); }); newSection.find("label").each(function (index, label) { var l = $(label); l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount)); }); return false; }); // Delete a repeating section $('.deleteFight').live('click',function(){ $(this).parent('div').remove(); return false; });​ 

我更改了删除处理程序，改为使用.live（） ，以便处理程序也可以附加到该按钮的新创建副本。 现在，如果你使用jquery> 1.7，你应该使用.on（）

on（）版本将是：

 // Delete a repeating section $(document).on('click','.deleteFight',function(){ $(this).parent('div').remove(); return false; }); 

Answer 2

这是我的版本。

http://jsfiddle.net/Unfxn/27/

它严重依赖于重复区域的索引。 所以不要在它上面添加任何兄弟姐妹。 如果确实需要，请将所有重复区域包装在另一个div中。

该死的！ 太晚了:)无论如何……这是代码。

 // Add a new repeating section var attrs = ['for', 'id', 'name']; function resetAttributeNames(section) { var tags = section.find('input, label'), idx = section.index(); tags.each(function() { var $this = $(this); $.each(attrs, function(i, attr) { var attr_val = $this.attr(attr); if (attr_val) { $this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1))) } }) }) } $('.addFight').click(function(e){ e.preventDefault(); var lastRepeatingGroup = $('.repeatingSection').last(); var cloned = lastRepeatingGroup.clone(true) cloned.insertAfter(lastRepeatingGroup); resetAttributeNames(cloned) }); // Delete a repeating section $('.deleteFight').click(function(e){ e.preventDefault(); var current_fight = $(this).parent('div'); var other_fights = current_fight.siblings('.repeatingSection'); if (other_fights.length === 0) { alert("You should atleast have one fight"); return; } current_fight.slideUp('slow', function() { current_fight.remove(); // reset fight indexes other_fights.each(function() { resetAttributeNames($(this)); }) }) });​ 

Answer 3

克隆对象后使用此选项

小提琴:) http://jsfiddle.net/fedmich/MZjKR/1/

我将为您留下一些TODO，将3改为当前的id数