文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >更改克隆元素的ids和名称

问更改克隆元素的ids和名称
EN

Stack Overflow用户
提问于 2018-03-13 23:51:05
回答 1查看 56关注 0票数 0

我有一个表单，允许用户输入多个委托，details.Here是html页面的片段。

代码语言：javascript
复制
<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时，它将克隆一组新的委托字段，我必须将克隆的元素的id和名称更改为后端的特定格式，以处理表单，我正在使用jquery进行此操作。

代码语言：javascript
复制
$(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);
});

我能够成功地更改标题引用的属性，但是我无法获取输入字段属性，因为它们属于同一个类‘w-输入’。我在这里做错什么了？提前感谢！

jquery
html
dom
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-14 00:39:59

因为您的目标是.w-input，而且它们是该类的多个元素，所以您要针对该类的所有元素。如果您是console.log('newElem.find('.w-input'))，您将收到一个数组。通过迭代每个元素，您可以分别针对它们，对字符串中的一个数字使用regex测试，并相应地进行替换。

解决方案：

代码语言：javascript
复制
$('#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);
    });

片段

​

代码语言：javascript
复制
$(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);
    });
  })
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49267698

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档