为克隆输入提供输入“名称”属性，即在列表中

所以这是我的情况。我有一个无序列表和一个列表中的一组输入和一个按钮，可以克隆这些输入中的4个。由于数据来自后端，可以有一个这个列表集或1000.所以我想动态地给列表中的每个输入的名称属性基于列表索引号，并找出一种方法来做到这一点克隆的投入也。如果你看类pm-providerNum我正在做类似于提供者名称的东西，所以它基于多少个列表。如果我添加更多列表提供者名称自动更改。返回到名称，对于li号码1，除了动态创建的输入之外的每个输入。每个输入名字会是这样为克隆输入提供输入“名称”属性，即在列表中

像添加位置动态输入，输入的名称将是：

<input type="text" name="p-address-0-dynamic#[dynamicnumber]" class="pm- 
    psubmit" placeholder="First Name" required="">

等.... dynamicnumber是说，新创建投入的数目。因此，如果没有额外的位置被添加到providor 1 /索引1，通过动态输入中的每个输入的名称为：

 <input type="text" name="p-address-0-dynamic#[0]" class="pm-psubmit" 
    placeholder="First Name" required="">

如果我添加一个额外的位置。那些输入将名称将是

 <input type="text" name="p-address-0-dynamic#[1]" class="pm-psubmit" 
    placeholder="First Name" required="">

上列表2 /索引2

<input type="text" name="p-address-1-dynamic#[0]" class="pm-psubmit" 
    placeholder="First Name" required="">

如果我添加一个额外的位置。这些投入将名称将是

<input type="text" name="p-address-1-dynamic#[1]" class="pm-psubmit" 
    placeholder="First Name" required="">

我花了一些时间来创建这个问题，它可能是混乱的，希望你们得到了什么，我想说的。我尝试了许多不同的方式来取得成功。希望我能得到一些启发

$('.pm-providerNum').each(function (index) { 
 
     $(this).html('Providor ' + (index + 1)); 
 
    }); 
 

 
    $("div.pm-providor-first-wrap").each(function (index) { 
 

 
     $(this).find('input').each(function() { 
 
      $(this).attr('name', $(this).attr('name')+ '-' + index); 
 

 
     }) 
 
    }); 
 

 
$(document).on("click", ".pm-add-loc-Class", function() { 
 
    var $sect = $(this).closest(".pm-loc-section"); 
 
    $sect.find(".pm-loc-inputWrapper").eq(0).clone().show().insertBefore($sect.find(".pm-loc-controls")).find('input').val(''); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
\t </script> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <div class="col-sm-12 pm-submitProvidor"> 
 
\t \t <ul> 
 
\t \t \t <li> 
 
\t \t \t \t <div class=""> 
 
\t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
\t \t \t \t \t <div class="pm-providor-first-wrap"> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
\t \t \t \t \t \t <div class="pm-loc-section"> 
 
\t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
\t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
\t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <div class=""> 
 
\t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
\t \t \t \t \t <div class="pm-providor-first-wrap"> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
\t \t \t \t \t \t <div class="pm-loc-section"> 
 
\t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
\t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
\t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <div class=""> 
 
\t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
\t \t \t \t \t <div class="pm-providor-first-wrap"> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t <input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
\t \t \t \t \t \t <div class="pm-loc-section"> 
 
\t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
\t \t \t \t \t \t \t \t <div class="row"> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
\t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
\t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-10-16 Anu Rajan

我没有在你的代码看到你曾经设置'name'属性，所以我并不清楚是什么你在问或问题是什么。你问的是如何按照你描述的方式设置'name'属性？到目前为止，你有什么尝试，如果有的话？ –

@DrewG是的，我想动态添加不在HTML中，因为列表可以基于客户端的很多或更少。我的尝试很混乱，并打破了克隆。我想给一个干净的片段。对不起 –

我建议你找到一个更好的方式来处理数据集，而不是给每个单元格一个唯一的ID。如果你正在使用php来处理这个问题，那么总是有一种方法来处理动态添加的数据，只需要指定'name =“myfield []”''类似数组的语法，可能是将行ID存储在隐藏表单字段中，与'name =“id []”'或类似。 – James

我会做这样的：对于每一个“providor”组拥有所有的输入名称属性的东西，如provider[index]开始，然后让每个特定领域的名称是第二维输入：provider[1][firstname]，provider[1][lastname]等

然后，对于你的位置字段，一个附加的索引添加到末尾，以指示哪个位置组它的一部分：

provider[1][city][1]
provider[1][state][1]
provider[1][city][2]
provider[1][state][2]

等

您也可以使用。数据（）函数来存储providor指数位置索引以稍后可以更容易地抓取的方式。

这里是一个工作示例：

$('.pm-providerInputGroup').each(function (index) 
 
{ 
 
    
 
    \t var inputGroupId = index + 1; 
 
    \t var groupEl = $(this); 
 
    \t 
 
    \t groupEl.data('groupId', inputGroupId); 
 
    \t 
 
    \t groupEl.find('.pm-providerNum').html('Providor ' + inputGroupId); 
 
    \t 
 
    \t groupEl.find('.pm-psubmit').each(function() 
 
    \t { 
 
    \t \t var cleanName = $(this).attr('placeholder').toLowerCase().replace(/[^a-z0-9]+/g, ''); 
 
    \t \t $(this).attr('name', 'providor[' + inputGroupId + '][' + cleanName + ']'); 
 
    \t }); 
 
    \t 
 
    \t groupEl.find('.pm-loc-section .pm-loc-inputWrapper').each(function(index2) 
 
    \t { 
 
    \t \t var locGroupId = index2 + 1; 
 
    \t \t 
 
    \t \t $(this).data('locGroupId', locGroupId); 
 
    \t \t 
 
    \t \t $(this).find('.pm-psubmit').each(function() 
 
    \t \t { 
 
    \t \t \t var curName = $(this).attr('name'); 
 
    \t \t \t $(this).attr('name', curName + '[' + locGroupId + ']'); 
 
    \t \t }); 
 
    \t }); 
 
    
 
}); 
 
    
 
    
 
$(document).on("click", ".pm-add-loc-Class", function() 
 
{ 
 
    var $sect = $(this).closest(".pm-loc-section"); 
 
    
 
    var lastLocGroup = $sect.find(".pm-loc-inputWrapper").eq(-1); 
 
    
 
    \t var lastLocGroupId = lastLocGroup.data('locGroupId'); 
 
    
 
    var newLocGroup = lastLocGroup.clone(); 
 
    
 
    \t var newLocGroupId = lastLocGroupId+1; 
 
    
 
    newLocGroup.show().insertBefore($sect.find(".pm-loc-controls")).find('input').val(''); 
 
     
 
    newLocGroup.data('locGroupId', newLocGroupId); 
 
    
 
    newLocGroup.find('.pm-psubmit').each(function(index2) 
 
    \t { 
 
    \t \t var curName = $(this).attr('name'); 
 
    \t \t var newName = curName.replace(/(\w+\[[^\]]+\]\[[^\]]+\])(\[[^\]]+\])/, '$1[' + newLocGroupId + ']'); 
 
    \t \t $(this).attr('name', newName); 
 
    \t }); 
 
}); \t

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    \t <title></title> 
 
</head> 
 
<body> 
 
    \t <div class="col-sm-12 pm-submitProvidor"> 
 
    \t \t <ul> 
 
    \t \t \t <li> 
 
    \t \t \t \t <div class="pm-providerInputGroup"> 
 
    
 
    \t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
    
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="First Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="M" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Last Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date of birth" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Phone #" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Email" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Degree" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Data of board exam" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="NRI #" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text"> 
 
    
 
    \t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
    \t \t \t \t \t \t <div class="pm-loc-section"> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
    \t \t \t \t \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
    \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
    \t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </li> 
 
    \t \t \t <li> 
 
    \t \t \t \t <div class="pm-providerInputGroup"> 
 
    
 
    \t \t \t \t \t <h4><span class="pm-providerNum"></span></h4> 
 
    
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="First Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="M" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Last Name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date of birth" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Phone #" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Personal Email" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Degree" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Date" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Data of board exam" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="NRI #" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice name" required="" type="text"> 
 
    \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text"> 
 
    
 
    \t \t \t \t \t <div class="row" style="padding-left:15px; padding-right:15px;"> 
 
    \t \t \t \t \t \t <div class="pm-loc-section"> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-inputWrapper"> 
 
    \t \t \t \t \t \t \t \t <div class="row"> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-3"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="City" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-1"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="State" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-2"> 
 
    \t \t \t \t \t \t \t \t \t \t <input class="pm-psubmit" placeholder="Zip" required="" type="text"> 
 
    \t \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t \t \t <div class="col-md-4"></div> 
 
    \t \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t \t <div class="pm-loc-controls text-right"> 
 
    \t \t \t \t \t \t \t \t <input class="pm-add-loc-Class" type="button" value="+ Add Another Location"> 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t </div> 
 
    
 
    \t \t \t \t </div> 
 
    \t \t \t </li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    
 
</body> 
 
</html>

来源

2017-10-16 19:22:08

哇这个作品就像一个魅力。唯一的问题是，当我将jquery代码添加到现有的js文件时，克隆命名不起作用。我得到“无法读取属性”替换“未定义”的错误。这是我的小提琴。在小提琴添加按钮没有创建新的输入，但它是在我的本地只是没有正确命名 https://jsfiddle.net/jaisil007/dscynarr/4/ –

那小提琴给我一个无关的错误负载：“未捕获TypeError：$（...）。accordion不是函数“ –

嗯，可能不得不将它作为另一个问题发布，我们的代码本身很棒。在我的本地，我有jQuery UI和手风琴正在工作，它说“不能读取属性'取代'未定义”。在jfiddle中，如果我删除手风琴它的作品。谢谢你的帮助:) –

为克隆输入提供输入“名称”属性，即在列表中

回答

相关问题