Question

我知道Stack上有很多与此主题有关的问题，但是我无法解决我的特定问题。我看了这个问题：jquery increment id and name of children within appended rows

并使用那里提供的代码，但是我无法使我的示例正常工作。我在这里摆弄着：https://jsfiddle.net/af3z0kx5/2/

使用以下HTML：

<main>
<form class="application">
<h3>Work Experience</h3>
<p class="note">Note: We check all references. Click the (+) or (-) buttons below to add or remove previous employment records.</p>
      <div class="work-experience">
        <div class="section group full">
          <div class="col span_6_of_12">
            <label for="fromdate">From (start date)</label>
            <input type="date" id="fromdate" name="From-Date" />
          </div>
          <div class="col span_6_of_12">
            <label for="todate">To (start date)</label>
            <input type="date" id="todate" name="To-Date" />
          </div>
        </div>

        <label for="workexp-employer">Employer's Name</label>
        <input type="text" name="Work-Exp-Employer" id="workexp-employer" />

        <label for="workexp-employer-address">Employer's Address</label>
        <input type="text" name="Work-Exp-Employer-Address" id="workexp-employer-address" placeholder="Street Address, State, and ZIP"/>

        <label for="workexp-employers-phone">Employer's Phone</label>
        <input type="tel" name="Work-Exp-Employer-Phone" id="workexp-employers-phone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="ex. 123-456-7890" />

        <label for="workexp-duties">Your Duties</label>
        <textarea placeholder="Summarize" class="duties"></textarea>

        <label for="workexp-supervisor">Supervisor's Name</label>
        <input type="text" name="Work-Exp-Supervisor" id="workexp-supervisor" />

        <div class="section group full">
          <div class="col span_6_of_12">
            <label for="starting-salary">Starting Rate/Salary</label>
            <input type="text" id="starting-salary" name="Starting-Salary" />
          </div>
          <div class="col span_6_of_12">
            <label for="ending-salary">Ending Rate/Salary</label>
            <input type="text" id="ending-salary" name="Ending-Salary" />
          </div>
        </div>

        <label for="workexp-leaving">Specific Reason for Leaving</label>
        <input type="text" name="Work-Exp-Leaving" id="workexp-leaving" />
        <hr />
      </div>
      <div class="control">
        <a href="#" class="add-work-exp">&nbsp;</a>
        <a href="#" class="remove-work-exp">&nbsp;</a>
      </div>
</form>
</main>

还有jQuery：

var i = $(".application .work-experience").length;
$(".add-work-exp").click(function(e) {
    e.preventDefault();
    var clonedRow = $(".work-experience").clone().find("input:text, textarea").val("").end();
    i++;
    $("*[name*='1']", clonedRow).attr('id', function() {
        var attrval = $(this).attr("id");
        attrval = attrval.replace(/\d/g, "");
        while($('#' + attrval + i).size() > 0) {
            i++;
        }
        return attrval + i;
    }).attr('name', function() {
        var attrval = $(this).attr("name");
        attrval = attrval.replace(/\d/g, "");
        return attrval + i;
    });
    $(".work-experience").append(clonedRow);
});

$(".remove-work-exp").click(function (e) {
  e.preventDefault();
 $("form .work-experience").last().remove();
});

此代码存在的问题：

克隆会将克隆的代码放入.work-experience div中。我需要它走到下面和外面。（我尝试使用.insertAfter代替.append，但由于某种原因，整个div消失了。）
每个输入的实际名称和id属性没有添加数字。我需要在克隆的div中每个输入的名称和ID上加上-1，-2，-3等。

感谢您提供的任何帮助。我显然不擅长jQuery，但是我需要解决这个问题。

Answer 1

非常感谢@Taplar为我指出正确的方向。

我的代码有2个问题：

我的名称或id属性中没有“ _Name1”。 jQuery一直在寻找并且找不到它，这就是为什么它没有增加的原因。
我正在使用不推荐使用的方法-size()-这导致错误。我将其更改为length并成功了！

新小提琴：https://jsfiddle.net/32r8z6xs/

使用jQuery，如何克隆表单元素并增加克隆元素的名称和ID？

1 个答案: