jQuery中的问题克隆行

Question

我在jQuery中克隆一行有问题。

我的JS：

<script>
  $(document).ready(function() {
    $('#addLine').click(function() {
      $('.data-line').last().clone({
      withDataAndEvents: false
    }).insertBefore('.data-line')();
    });                 
  });
</script>

我的HTML：

<div class="form-group data-line"></div>
<a href="#" id="addLine"><i class="fa fa-plus"></i> Add</a>

我的问题是：

每次我点击我的链接(#addLine)，它都会克隆我的行。但在第二次点击，它将复制这两行。

如何允许只复制一行？

谢谢。

Answer 1

更改insertBefore选择器：

$(document).ready(function() {
  $('#addLine').click(function() {
    $('.data-line').last().clone({
      withDataAndEvents: false
    }).insertBefore('.data-line:nth-child(1)');
  });                 
});

在代码中，在类名为.data-line的每个元素之前插入已克隆的节点。

演示

Answer 2

.insertBefore('.data-line')在每个现有的.data-line元素之前插入已克隆的元素。因此，它不克隆这两行，而是创建最后一行的两个克隆，并在每个现有的.data-line之前插入每个克隆。

您可以使用.insertBefore('.data-line:first')代替，只在第一个.data-line元素之前插入克隆。