Question

添加行会克隆div但是当我继续点击它并不克隆单个元素但是倍数时，逻辑的缺陷是什么？

＆＃13;

$('#addRow').click(function () {
    $(this).siblings('.elem').clone().appendTo($(this).siblings('.elem'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elem">elem</div>
<a id="addRow">+</a>

＆＃13;

Answer 1

您只想选择一个元素，而siblings('.elem')调用正在选择所有这些元素（当前除外），包括克隆的元素。

致电first()后，您可以致电siblings()，只选择一个。

您可能还想将它们附加到父级，而不是所有兄弟级别的同一集合。

var $clone = $(this).siblings('.elem').first().clone();

$clone.appendTo($(this).parent());

或者，你可以insertAfter()最后一个元素（$(this).siblings('.elem').last()）。

Answer 2

您正在进行多次克隆，因为每次克隆元素时都会生成一个带有class="elem"的新元素，因此每次点击都会克隆所有具有class="elem"的元素。

要解决此问题，请使用first()，它仅选择带有class="elem"的第一个元素，因此每次点击时只会克隆一个元素。

以下是代码的简化版本，

$("#addRow").click(function(){
    $(".elem").first().clone().appendTo("body");
});

Here is the JSFiddle for this solution

不要将其附加到“body”，而是使用要附加克隆元素的元素的id。希望这会有所帮助。

Answer 3

仅克隆第一个元素，并在最后一个实例之后插入一次。

$('#addRow').click(function () {
    $(this).siblings('.elem:first').clone().insertAfter($(this).siblings('.elem:last'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elem">elem</div>
<a id="addRow">+</a>

Answer 4

问题是，每次单击按钮时，journalism选择器都会匹配越来越多的元素。

解决此问题的一种方法是保留对一个元素的引用，并使用它来克隆然后追加;此外，将这些元素分组到另一个.elem中以便于参考是有意义的。

＆＃13;

<div>

＆＃13;

jQuery(function() {
  var $elem = $('#rows .elem'); // keep as reference

  $('#addRow').click(function () {
    $('#rows').append($elem.clone());
  });
});

＆＃13;

jquery clone第一次工作但不是以后

4 个答案: