使用jQuery动态表单的单个div中的多个文本字段

使用这里的jQuery代码，但我试图在每个div中有多个文本输入。 它正确显示并增加并保存第一个元素的名称和ID，但对于第二个年龄输入，它仅存储第一个输入。

    $(document).ready(function() { $('#btnAdd').click(function() { var num = $('.clonedInput').length; var newNum = new Number(num + 1); var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum); $('#input' + num).after(newElem); $('#btnDel').attr('disabled',''); if (newNum == 5) $('#btnAdd').attr('disabled','disabled'); }); $('#btnDel').click(function() { var num = $('.clonedInput').length; $('#input' + num).remove(); $('#btnAdd').attr('disabled',''); if (num-1 == 1) $('#btnDel').attr('disabled','disabled'); }); $('#btnDel').attr('disabled','disabled'); });    
 
 Name:  
 
   
 
   

这是我的新表单和jQuery代码的样子。

 
 
 Name:  Age:  
 
    

 newElem.children(':first') .attr('id', 'age' + newNum) .attr('name', 'age' + newNum); 

Answer 1

您的脚本只更新第一个输入，您需要循环并更新克隆div中的所有输入

 $('#btnAdd').click(function () { var num = $('.clonedInput').length; var newNum = num + 1; var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); newElem.find(':input').each(function () { $(this).attr('id', $(this).attr('id').replace(/\d+/, newNum)); $(this).attr('name', $(this).attr('name').replace(/\d+/, newNum)); }); $('#input' + num).after(newElem); $('#btnDel').attr('disabled', ''); if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled'); });