更改克隆元素的ID和名称

时间：2018-03-13 23:51:05

标签： jquery html dom

我有一个表单，我允许用户输入多个委托详细信息。这是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;。我在这做错了什么？提前谢谢！

1 个答案:

答案 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);
    });

段

＆＃13;
＆＃13; 
$(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);
    });
  })
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题