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

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等...？

这是一个小提琴

Answer 1

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

试试这个（我为demo添加了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>