如何克隆一个表单并不止一次更改其子项的 id？

如何解决如何克隆一个表单并不止一次更改其子项的 id？

我一直在尝试克隆作为表单一部分的部分，我已成功完成该部分。但是我需要处理数据，所以我需要更改元素子元素的 ID（输入，选择 ecc）。我一直在网上找了一段时间，但没有什么对我有用，也是因为我想更频繁地克隆元素，而且 ID 应该每次都改变。 你能帮我解决这个问题吗？会很棒：

HTML：

<div class="input-form fcf-form-group">

  <div class="form only">
    <h3 class="fcf-h3">Room</h3>
    <div class="form-section">

      <div class="title-group">
        <label for="room" class="fcf-label">Room</label>
        <select name="room" id="room" required>
          <option value="double">Double</option>
          <option value="single">Single</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form neighbour">

    <div class="title-group small">
      <label for="adults" class="fcf-label">Adults</label>
      <input type="number" id="adults" name="adults" min="1" max="5">
    </div>

    <div class="title-group small">
      <label for="child" class="fcf-label">Children</label>
      <input type="number" id="child" name="child" min="1" max="5">
    </div>

    <div class="title-group small">
      <label for="age" class="fcf-label">Age of the Child</label>
      <select name="age" id="age" required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
  </div>
</div>
</div>

查询：

$('#but_add').click(function () {

  // Create clone of <div class='input-form'>
  var newel = $('.input-form:last').clone();

  // Add after last <div class='input-form'>
  $(newel).insertAfter('.input-form:last');
});
})

解决方法

您可以首先通过选择器克隆表单（就像您所做的那样），然后通过 multiple selector 搜索每个表单元素（输入和选择）。存储它们后，您可以映射它们，然后通过 .attr 更新输入元素 id 以在每次执行此操作时添加索引（例如：房间，然后是房间 1，然后是房间，...）。需要明确的是，您可以将初始 HTML 中的每个 id 重命名为“0”（例如：room0）。

最后，您将拥有每个 id 递增的表单数据。

,

此代码将克隆原始表单，为克隆中的每个 id 和 for 属性附加一个唯一编号，并将克隆添加到容器底部：

function cloneAndChangeIds(wrapper,text) {

  // clone the wrapper
  const clone = wrapper.cloneNode(true);

  // add text to the `for` attribute of every label
  const labels = Array.from(clone.querySelectorAll('label'));
  labels.forEach(label => {
    label.htmlFor += text;
  });

  // add text to the `id` attribute of every select and input 
  const items = Array.from(clone.querySelectorAll('select,input'));
  items.forEach(select => {
    select.id += text
  });

  return clone;
}

let iClone = 0;

// get container and original wrapper
const container = document.getElementById('container');
const original = document.querySelector('.input-form');
const cloneBtn = document.getElementById('clone-button');

function appendAClone() {
  // clone original and modify IDs
  let clone = cloneAndChangeIds(original,'-1');

  // add clone at end of container div
  container.appendChild(clone);
}

cloneBtn.onclick = appendAClone;

<button id="clone-button">Make A Clone</button>
<p>The original:</p>
<hr>
<div id="container">
  <div class="input-form fcf-form-group">

    <div class="form only">
      <h3 class="fcf-h3">Room</h3>
      <div class="form-section">

        <div class="title-group">
          <label for="room" class="fcf-label">Room</label>
          <select name="room" id="room" required>
            <option value="double">Double</option>
            <option value="single">Single</option>
          </select>
        </div>
      </div>
    </div>

    <div class="form neighbour">

      <div class="title-group small">
        <label for="adults" class="fcf-label">Adults</label>
        <input type="number" id="adults" name="adults" min="1" max="5">
      </div>

      <div class="title-group small">
        <label for="child" class="fcf-label">Children</label>
        <input type="number" id="child" name="child" min="1" max="5">
      </div>

      <div class="title-group small">
        <label for="age" class="fcf-label">Age of the Child</label>
        <select name="age" id="age" required>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
    </div>
    <hr>
  </div>
</div>