所以这是我的情况。我有一个无序列表，在列表中有一组输入和一个可以克隆其中4个输入的按钮。由于数据来自后端，因此可以有一个列表集或1000.所以我试图根据列表索引号为列表中的每个输入动态赋予名称属性，并找出一种方法来为克隆的输入也。如果你看一下 pm-providerNum 这个类我正在做一些类似于提供者名称的东西，所以它基于多少lists.if我添加更多列表提供者名称自动更改。返回名称，因此对于li编号1，除了动态创建的输入之外的每个输入。每个输入名称都是这样的
在添加位置等动态输入上，输入名称为：
<input type="text" name="p-address-0-dynamic#[dynamicnumber]" class="pm-
psubmit" placeholder="First Name" required="">
<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="">
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<title></title>
</head>
<body>
<div class="col-sm-12 pm-submitProvidor">
<ul>
<li>
<div class="">
<h4><span class="pm-providerNum"></span></h4>
<div class="pm-providor-first-wrap">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-2">
<input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text">
</div>
</div>
</div>
<div class="row" style="padding-left:15px; padding-right:15px;">
<div class="pm-loc-section">
<div class="pm-loc-inputWrapper">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="City" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" placeholder="State" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="Zip" required="" type="text">
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="pm-loc-controls text-right">
<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
</div>
</div>
</div>
</div>
</li>
<li>
<div class="">
<h4><span class="pm-providerNum"></span></h4>
<div class="pm-providor-first-wrap">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-2">
<input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text">
</div>
</div>
</div>
<div class="row" style="padding-left:15px; padding-right:15px;">
<div class="pm-loc-section">
<div class="pm-loc-inputWrapper">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="City" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" placeholder="State" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="Zip" required="" type="text">
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="pm-loc-controls text-right">
<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
</div>
</div>
</div>
</div>
</li>
<li>
<div class="">
<h4><span class="pm-providerNum"></span></h4>
<div class="pm-providor-first-wrap">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" name="p-first_name" placeholder="First Name" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" name="p-middle_name" placeholder="M" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-last_name" placeholder="Last Name" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-dob" placeholder="Date of birth" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-personal_num" placeholder="Personal Phone #" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-personal_email" placeholder="Personal Email" required="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" name="p-degree" placeholder="Degree" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-d_date" placeholder="Date" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-dobe" placeholder="Data of board exam" required="" type="text">
</div>
<div class="col-md-3">
<input class="pm-psubmit" name="p-nri_num" placeholder="NRI #" required="" type="text">
</div>
</div>
<div class="row">
<div class="col-md-2">
<input class="pm-psubmit" name="p-prim_spec" placeholder="Primary Speciality" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-sec_spec" placeholder="Secondary Speciality" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-practice_name" placeholder="Practice name" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" name="p-practice_num" placeholder="Practice Phone #" required="" type="text">
</div>
</div>
</div>
<div class="row" style="padding-left:15px; padding-right:15px;">
<div class="pm-loc-section">
<div class="pm-loc-inputWrapper">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="City" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" placeholder="State" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="Zip" required="" type="text">
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="pm-loc-controls text-right">
<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：1)
我会这样做：对于每个＆＃34;提供者＆＃34; group将所有输入名称属性以provider[index]之类的内容开头，然后将每个特定字段的名称作为第二维输入：provider[1][firstname]，provider[1][lastname]等。
然后，对于您的位置字段，请在末尾添加一个附加索引，以指示它所属的位置组：
provider[1][city][1] provider[1][state][1]
provider[1][city][2]
provider[1][state][2] 等
您还可以使用.data（）函数以稍后可以轻松获取的方式存储提供者索引和位置索引。
这是一个有效的例子：
$('.pm-providerInputGroup').each(function (index)
{
var inputGroupId = index + 1;
var groupEl = $(this);
groupEl.data('groupId', inputGroupId);
groupEl.find('.pm-providerNum').html('Providor ' + inputGroupId);
groupEl.find('.pm-psubmit').each(function()
{
var cleanName = $(this).attr('placeholder').toLowerCase().replace(/[^a-z0-9]+/g, '');
$(this).attr('name', 'providor[' + inputGroupId + '][' + cleanName + ']');
});
groupEl.find('.pm-loc-section .pm-loc-inputWrapper').each(function(index2)
{
var locGroupId = index2 + 1;
$(this).data('locGroupId', locGroupId);
$(this).find('.pm-psubmit').each(function()
{
var curName = $(this).attr('name');
$(this).attr('name', curName + '[' + locGroupId + ']');
});
});
});
$(document).on("click", ".pm-add-loc-Class", function()
{
var $sect = $(this).closest(".pm-loc-section");
var lastLocGroup = $sect.find(".pm-loc-inputWrapper").eq(-1);
var lastLocGroupId = lastLocGroup.data('locGroupId');
var newLocGroup = lastLocGroup.clone();
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)
{
var curName = $(this).attr('name');
var newName = curName.replace(/(\w+\[[^\]]+\]\[[^\]]+\])(\[[^\]]+\])/, '$1[' + newLocGroupId + ']' );
$(this).attr('name', newName);
});
}); <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<div class="col-sm-12 pm-submitProvidor">
<ul>
<li>
<div class="pm-providerInputGroup">
<h4><span class="pm-providerNum"></span></h4>
<input class="pm-psubmit" placeholder="First Name" required="" type="text">
<input class="pm-psubmit" placeholder="M" type="text">
<input class="pm-psubmit" placeholder="Last Name" required="" type="text">
<input class="pm-psubmit" placeholder="Date of birth" required="" type="text">
<input class="pm-psubmit" placeholder="Personal Phone #" type="text">
<input class="pm-psubmit" placeholder="Personal Email" required="" type="text">
<input class="pm-psubmit" placeholder="Degree" required="" type="text">
<input class="pm-psubmit" placeholder="Date" required="" type="text">
<input class="pm-psubmit" placeholder="Data of board exam" required="" type="text">
<input class="pm-psubmit" placeholder="NRI #" required="" type="text">
<input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text">
<input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text">
<input class="pm-psubmit" placeholder="Practice name" required="" type="text">
<input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text">
<div class="row" style="padding-left:15px; padding-right:15px;">
<div class="pm-loc-section">
<div class="pm-loc-inputWrapper">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="City" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" placeholder="State" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="Zip" required="" type="text">
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="pm-loc-controls text-right">
<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
</div>
</div>
</div>
</div>
</li>
<li>
<div class="pm-providerInputGroup">
<h4><span class="pm-providerNum"></span></h4>
<input class="pm-psubmit" placeholder="First Name" required="" type="text">
<input class="pm-psubmit" placeholder="M" type="text">
<input class="pm-psubmit" placeholder="Last Name" required="" type="text">
<input class="pm-psubmit" placeholder="Date of birth" required="" type="text">
<input class="pm-psubmit" placeholder="Personal Phone #" type="text">
<input class="pm-psubmit" placeholder="Personal Email" required="" type="text">
<input class="pm-psubmit" placeholder="Degree" required="" type="text">
<input class="pm-psubmit" placeholder="Date" required="" type="text">
<input class="pm-psubmit" placeholder="Data of board exam" required="" type="text">
<input class="pm-psubmit" placeholder="NRI #" required="" type="text">
<input class="pm-psubmit" placeholder="Primary Speciality" required="" type="text">
<input class="pm-psubmit" placeholder="Secondary Speciality" required="" type="text">
<input class="pm-psubmit" placeholder="Practice name" required="" type="text">
<input class="pm-psubmit" placeholder="Practice Phone #" required="" type="text">
<div class="row" style="padding-left:15px; padding-right:15px;">
<div class="pm-loc-section">
<div class="pm-loc-inputWrapper">
<div class="row">
<div class="col-md-3">
<input class="pm-psubmit" placeholder="Practice Physical Address" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="City" required="" type="text">
</div>
<div class="col-md-1">
<input class="pm-psubmit" placeholder="State" required="" type="text">
</div>
<div class="col-md-2">
<input class="pm-psubmit" placeholder="Zip" required="" type="text">
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="pm-loc-controls text-right">
<input class="pm-add-loc-Class" type="button" value="+ Add Another Location">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>