javascript - 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>