每次點擊jQuery clone div

Question

我有一個簡單的表單，並有一個按鈕來單擊時克隆我的表單。 問題是，當我第一次點擊按鈕時，它工作正常，但是在下次點擊時會附加許多div。 有沒有辦法每次點擊一個一個地復制？ 這是我的片段：

 $(document).ready(function() { $(".Add").click(function() { $(".formi").clone().insertAfter(".formi:last"); }); }); 

 .formi { border: 1px solid #000; width: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name" /> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> 

Answer 1

您可以找到第一個表單而不是使用eq(0)在DOM中查找所有表單或查找最近的表單，

 $(document).ready(function(){ $(".Add").click(function(){ $(".formi").eq(0).clone().insertAfter(".formi:last"); //$(".formi:last").clone().insertAfter(".formi:last"); }); }); 

 .formi{border:1px solid #000;width:50%;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name"/> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> 

Answer 2

$(".formi").clone(). 克隆所有.formi元素在頁面上可用。 您只需要克隆第一個.formi元素而不是克隆已經通過模板追加的.formi 。

$(".Add").click(function(){
    var $formTemplate = $(".formi:first");
    $formTemplate.clone().insertAfter(".formi:last");
});

Answer 3

使用first() ， first()方法返回所選元素的第一個元素。

 $(document).ready(function() { $(".Add").click(function() { $(".formi").first().clone().insertAfter(".formi:last"); }); }); 

 .formi { border: 1px solid #000; width: 50%; } 

 <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name" /> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

Answer 4

您需要使用.eq()方法僅克隆第一個，這會將匹配元素集減少到指定索引處的元素集。

請試試這個：

$(".formi").eq(0).clone().insertAfter(".formi:last");

參考文獻：

• 方法

 $(document).ready(function() { $(".Add").click(function() { $(".formi").eq(0).clone().insertAfter(".formi:last"); }); }); 

 .formi { border: 1px solid #000; width: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name" /> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> 

Answer 5

 $(document).ready(function(){ $(".Add").click(function(){ $(".formi").eq(0).clone().insertAfter(".formi:last"); }); }); 

 .formi{border:1px solid #000;width:50%;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name"/> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> 

Answer 6

 $(document).ready(function() { $(".Add").click(function() { $(".formi:nth-child(1)").clone().insertAfter(".formi:last"); }); }); 

 .formi { border: 1px solid #000; width: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name" /> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> 

1. 添加:nth-child(1)這樣您只能克隆第一個。

Answer 7

 $(document).ready(function(){ $(".Add").click(function(){ $(".formi:last").clone().insertAfter(".formi:last"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name"/> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> 

Answer 8

使用:nth-child(1)

 $(document).ready(function(){ $(".Add").click(function(){ $(".formi:nth-child(1)").clone().insertAfter(".formi:last"); }); }); 

 .formi{border:1px solid #000;width:50%;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <span class="Add">Add+</span> <div class="all"> <form class="formi"> <input type="text" placeholder="name"/> <select name="cars"> <option value="">one</option> <option value="">two</option> </select> <button type="submit">ok</button> </form> </div> 

Answer 9

我有評論，你犯了錯誤，這將是什么可能的解決方案

$(document).ready(function() {
$(".Add").click(function() {
//Mistake : when you are clicking second time, you clone both the forms having class '.formi'
$(".formi").clone().insertAfter(".formi:last");

// $(".formi:nth-child(1)").clone().insertAfter(".formi:last"); : This one will work

  });
});