Question

我使用此代码克隆.minor div内的.major div：

$(document).on("click", ".clone", clone);

cloneIndex = 1;

function clone() {
    cloneIndex++;
    $(this).parents(".minor").clone()
           .appendTo(".major")
           .attr("id", "form" + cloneIndex);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="major">
    <p>
      <select id="major_sel_id">
        <option value="na">N/a</option>
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
      </select>
      Major Select id
    </p>
  <div class="minor" id="form1">
    <p>
      <select id="form1_q1">
        <option value="y">Yes</option>
        <option value="n">No</option>
        <option value="na" selected>N/a</option>
      </select>
      Question 1
    </p>
    <p>
      <select id="form1_q2">
        <option value="y">Yes</option>
        <option value="n">No</option>
        <option value="na" selected>N/a</option>
      </select>
      Question 2
    </p>
    <p>
      <button id="add" type="button" class="clone">+</button>
    </p>
  </div>
</div>

然而，这在每个选择中保留相同的ID。如何将选择的ID更改为form2_q1，form2_q2等...？

Here is a fiddle

Answer 1

您成功替换了父级的ID，您需要获取子级并替换其ID。要获得孩子，您可以使用find("select")，并替换他们的ID，您可以使用attr()内的函数，该函数会将当前后缀添加到字符串"form" + cloneIndex。要获取当前后缀，您可以使用this.id.substring(5)。

试试这个（我为演示添加了console.log行，你不需要它）：

cloneIndex = 1;

function clone() {
  cloneIndex++;
  $(this).parents(".minor")
         .clone()
         .attr("id", "form" + cloneIndex)
         .appendTo(".major")
         .find("select")
         .attr("id", function() {
      return "form" + cloneIndex + this.id.substring(5);
    });
  console.log($(".major").html());
}

$("#add").click(clone);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="major">
  <p>
    <select id="major_sel_id">
        <option value="na">N/a</option>
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
      </select> Major Select id
  </p>
  <div class="minor" id="form1">
    <p>
      <select id="form1_q1">
        <option value="y">Yes</option>
        <option value="n">No</option>
        <option value="na" selected>N/a</option>
      </select> Question 1
    </p>
    <p>
      <select id="form1_q2">
        <option value="y">Yes</option>
        <option value="n">No</option>
        <option value="na" selected>N/a</option>
      </select> Question 2
    </p>
    <p>
      <button id="add" type="button" class="clone">+</button>
    </p>
  </div>
</div>

Answer 2

您还需要替换所有选择ID：

$(document).on("click", ".clone", clone);

let cloneIndex = 1;

function clone() {
    cloneIndex++;
    $(this).parents(".minor").clone()
           .appendTo(".major")
           .attr("id", "form" + cloneIndex)
           .find("select").each(function(i, s) {
               $(s).attr("id", $(s).attr("id").replace(/form\d+/, "form" + cloneIndex));
           });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="major">
    <p>
      <select id="major_sel_id">
        <option value="na">N/a</option>
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
      </select>
      Major Select id
    </p>
  <div class="minor" id="form1">
    <p>
      <select id="form1_q1">
        <option value="y">Yes</option>
        <option value="n">No</option>
        <option value="na" selected>N/a</option>
      </select>
      Question 1
    </p>
    <p>
      <select id="form1_q2">
        <option value="y">Yes</option>
        <option value="n">No</option>
        <option value="na" selected>N/a</option>
      </select>
      Question 2
    </p>
    <p>
      <button id="add" type="button" class="clone">+</button>
    </p>
  </div>
</div>

克隆div并更改内部选择的id

2 个答案: