クリックするたびにjQuery clone div

Question

私は簡単なフォームと、クリックするとフォームをクローンするボタンがあります。問題は、最初にボタンをクリックしたとき、それが正しく動作することですが、次回は、クリックすると多くのdivが追加されます。クリックするたびに1つずつコピーする方法はありますか？

$(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(){ 
 
\t \t $(".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

あなたは指定されたインデックスのいずれかにマッチした要素の集合を減らす.eq()方法を使用して、最初のクローンを作成する必要があります。

これを試してください：

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

参考文献：

• eq method

$(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 4

$(document).ready(function(){ 
 
    $(".Add").click(function(){ 
 
\t \t $(".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: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 6

$(document).ready(function(){ 
 
    $(".Add").click(function(){ 
 
\t \t $(".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 7

使用:nth-child(1)

$(document).ready(function(){ 
 
    $(".Add").click(function(){ 
 
\t \t $(".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 8

使用first()、first()方法は、選択されたELの最初の要素を返しますements。

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

 
    }); 
 
});

.formi { 
 
\t border: 1px solid #000; 
 
\t 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 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 

    }); 
});