我有一个表单，我允许用户输入多个委托详细信息。这是html页面的片段。
<div id="Delegate1" class="clonedInput">
<h4 id="reference" name="reference" class="heading-reference">Delegate #1</h4>
<div class="w-row">
<div class="column-5 w-col w-col-6"><label for="email-5">*First Name:</label>
<input type="text" class="w-input" maxlength="256" name="first_name" data-name="first_name" placeholder="First Name" id="first_name" required=""></div>
<div class="column-4 w-col w-col-6"><label for="email-5">*Last Name:</label>
<input type="text" class="w-input" maxlength="256" name="last_name" data-name="last_name" placeholder="Last Name" id="last_name" required=""></div>
</div><label for="email-5">*Job Title / Position</label>
<select id="title" name="title" class="w-select">
<option value="">What best describes your role?</option>
<option value="Partner/Principal">Partner/Principal</option>
<option value="Director/CEO/CFO">Director/CEO/CFO</option>
<option value="General Manager">General Manager</option>
<option value="Senior Manager">Senior Manager</option>
<option value="Manager">Manager</option>
</select>
<div class="w-row">
<div class="column-10 w-col w-col-6"><label for="email-5">*Email Address</label>
<input type="email" class="w-input" maxlength="256" name="email_address" data-name="email_address" placeholder="Email Address" id="email_address" required=""></div>
<div class="column-11 w-col w-col-6"><label for="email-5">Mobile</label>
<input type="text" class="w-input" maxlength="256" name="mobile" data-name="mobile" placeholder="Mobile Number" id="mobile"></div>
</div>
<label for="email-5">*Postal Address</label>
<input type="text" class="w-input" maxlength="256" name="mailing_street" data-name="mailing_street" placeholder="Postal Address" id="mailing_street" required="">
<div class="w-row">
<div class="column w-col w-col-4"><label for="Suburb">*Suburb</label>
<input type="text" class="w-input" maxlength="256" name="mailing_suburb" data-name="mailing_suburb" placeholder="Enter your email" id="mailing_suburb" required=""></div>
<div class="column-2 w-col w-col-4"><label for="email-5">*State</label>
<input type="text" class="w-input" maxlength="256" name="mailing_state" data-name="mailing_state" placeholder="State" id="mailing_state" required=""></div>
<div class="column-3 w-col w-col-4"><label for="email-5">*Postcode</label>
<input type="text" class="w-input" maxlength="256" name="mailing_postcode" data-name="mailing_postcode" placeholder="Postcode" id="mailing_postcode" required=""></div>
</div>
<label for="email-5">Please note any special requirements (eg. dietary, mobility, hearing or sight)</label>
<input type="text" class="w-input" maxlength="256" name="message" data-name="message" placeholder="Special Requirements" id="message">
</div>
<div class="w-row">
<div class="column-6 w-col w-col-6"><button type="button" id="btnAdd" class="delegate-button w-button">Add New Delegate</button></div>
<div class="column-7 w-col w-col-6"><button type="button" id="btnDel" class="delegate-button remove w-button">Remove Above Delegate</button></div>
</div>
现在，当我点击addbtn时，它将克隆一组新的委托字段，我必须更改克隆的元素＆＃39; id和我的后端的特定格式的名称来处理表单。我正在使用jquery来执行此操作。
$(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length,
newNum = new Number(num + 1),
newElem = $('#Delegate' + num).clone().attr('id', 'Delegate' + newNum).fadeIn('slow');
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Delegate #' + newNum);
newElem.find('.w-select').attr('id', 'ID' + newNum + '_title').attr('name', 'ID' + newNum + '_title').val('');
newElem.find('.w-input').attr('id', 'ID' + newNum + '_first_name').attr('name', 'ID' + newNum + '_first_name').val('');
newElem.find('.w-input').attr('id', 'ID' + newNum + '_last_name').attr('name', 'ID' + newNum + '_last_name').val('');
newElem.find('.w-input').attr('id', 'ID' + newNum + '_email_address').attr('name', 'ID' + newNum + '_email_address').val('');
newElem.find('.w-input').attr('id', 'ID' + newNum + '_mobile').attr('name', 'ID' + newNum + '_mobile').val('');
newElem.find('.w-input').attr('id', 'ID' + newNum + '_message').attr('name', 'ID' + newNum + '_message').val('');
$('#Delegate' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
$('#btnDel').attr('disabled', false);
if (newNum == 5)
$('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
$('#number_of_delegate').val(newNum);
});
我能够成功更改heading-reference的属性，但我无法获取输入字段属性，因为它们属于同一类＆w;输入＆＃39;。我在这做错了什么？提前谢谢！
答案 0 :(得分：1)
由于您定位的是.w-input，并且它们是该类的多个元素，因此您将使用该类定位所有元素。如果你去console.log('newElem.find('.w-input'))，你会收到一个数组。通过迭代每个元素，您可以单独定位它们，对字符串中的数字使用正则表达式测试，并相应地替换。
$('#btnAdd').click(function () {
var num = $('.clonedInput').length,
newNum = new Number(num + 1),
newElem = $('#Delegate' + num).clone().attr('id', 'Delegate' + newNum).fadeIn('slow');
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Delegate #' + newNum);
newElem.find('.w-select').attr('id', 'ID' + newNum + '_title').attr('name', 'ID' + newNum + '_title').val('');
//loop through each element
newElem.find('.w-input').each(function(el) {
var currentId = $(this).attr('id');
var uniqueId; //hold a var for the unique id
if(/(\d+)/.test(currentId)) { //if digits exist
uniqueId = currentId.replace(/(\d+)/, newNum); //replace digits with the new number
} else {
uniqueId = 'ID' + newNum + '_' + currentId; //otherwise, replace with current id plus number etc.
}
$(this).attr('id', uniqueId).attr('name', uniqueId).val(''); //the the name and id to the new unique id
});
$('#Delegate' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
$('#btnDel').attr('disabled', false);
if (newNum == 5)
$('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
$('#number_of_delegate').val(newNum);
});
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').length,
newNum = new Number(num + 1),
newElem = $('#Delegate' + num).clone().attr('id', 'Delegate' + newNum).fadeIn('slow');
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Delegate #' + newNum);
newElem.find('.w-select').attr('id', 'ID' + newNum + '_title').attr('name', 'ID' + newNum + '_title').val('');
newElem.find('.w-input').each(function(el) {
var currentId = $(this).attr('id');
var uniqueId;
if(/(\d+)/.test(currentId)) {
uniqueId = currentId.replace(/(\d+)/, newNum);
} else {
uniqueId = 'ID' + newNum + '_' + currentId;
}
$(this).attr('id', uniqueId).attr('name', uniqueId).val('');
});
$('#Delegate' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
$('#btnDel').attr('disabled', false);
if (newNum == 5)
$('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
$('#number_of_delegate').val(newNum);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Delegate1" class="clonedInput">
<h4 id="reference" name="reference" class="heading-reference">Delegate #1</h4>
<div class="w-row">
<div class="column-5 w-col w-col-6"><label for="email-5">*First Name:</label>
<input type="text" class="w-input" maxlength="256" name="first_name" data-name="first_name"
placeholder="First Name" id="first_name" required=""></div>
<div class="column-4 w-col w-col-6"><label for="email-5">*Last Name:</label>
<input type="text" class="w-input" maxlength="256" name="last_name" data-name="last_name"
placeholder="Last Name" id="last_name" required=""></div>
</div>
<label for="email-5">*Job Title / Position</label>
<select id="title" name="title" class="w-select">
<option value="">What best describes your role?</option>
<option value="Partner/Principal">Partner/Principal</option>
<option value="Director/CEO/CFO">Director/CEO/CFO</option>
<option value="General Manager">General Manager</option>
<option value="Senior Manager">Senior Manager</option>
<option value="Manager">Manager</option>
</select>
<div class="w-row">
<div class="column-10 w-col w-col-6"><label for="email-5">*Email Address</label>
<input type="email" class="w-input" maxlength="256" name="email_address" data-name="email_address"
placeholder="Email Address" id="email_address" required=""></div>
<div class="column-11 w-col w-col-6"><label for="email-5">Mobile</label>
<input type="text" class="w-input" maxlength="256" name="mobile" data-name="mobile"
placeholder="Mobile Number" id="mobile"></div>
</div>
<label for="email-5">*Postal Address</label>
<input type="text" class="w-input" maxlength="256" name="mailing_street" data-name="mailing_street"
placeholder="Postal Address" id="mailing_street" required="">
<div class="w-row">
<div class="column w-col w-col-4"><label for="Suburb">*Suburb</label>
<input type="text" class="w-input" maxlength="256" name="mailing_suburb" data-name="mailing_suburb"
placeholder="Enter your email" id="mailing_suburb" required=""></div>
<div class="column-2 w-col w-col-4"><label for="email-5">*State</label>
<input type="text" class="w-input" maxlength="256" name="mailing_state" data-name="mailing_state"
placeholder="State" id="mailing_state" required=""></div>
<div class="column-3 w-col w-col-4"><label for="email-5">*Postcode</label>
<input type="text" class="w-input" maxlength="256" name="mailing_postcode" data-name="mailing_postcode"
placeholder="Postcode" id="mailing_postcode" required=""></div>
</div>
<label for="email-5">Please note any special requirements (eg. dietary, mobility, hearing or sight)</label>
<input type="text" class="w-input" maxlength="256" name="message" data-name="message"
placeholder="Special Requirements" id="message">
</div>
<div class="w-row">
<div class="column-6 w-col w-col-6">
<button type="button" id="btnAdd" class="delegate-button w-button">Add New Delegate</button>
</div>
<div class="column-7 w-col w-col-6">
<button type="button" id="btnDel" class="delegate-button remove w-button">Remove Above Delegate</button>
</div>
</div>