克隆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>