Question

一般来说编程相当新，所以这可能不太好看。我的问题是当我点击html（Fiddle）

中的按钮时

$(document).ready(function() {
  $("button").click(function() {
    $(".groupcontainer").clone().appendTo(".groupcontainer");
  });
});

它会在第一时间完美复制。然后，当我一直点击它时，div将以指数方式复制，格式变得混乱。此外，当它确实添加到网页时，父div不会垂直扩展以允许重复。

每次按下按钮时都需要一个副本（如果可能的话，附加到自身???）
如果多次重复，则需要使用父div进行扩展。

我假设＃1是因为我使用.groupcontainer来克隆并将其附加到自身 - 这是一个问题吗？有人可以解释我将如何克隆.groupcontainer并将其直接附加在自身下方吗？我环顾四周，但没有看到我遇到的同样问题。

对于＃2，是否以这种方式附加不允许父div扩展？

我到目前为止你想笑吗？

Answer 1

我建议同时使用.closest()和.parent()的组合（另请注意我使用.clone()的标记）：

＆＃13;

$(document).ready(function() {
  $("button").click(function() {
    var target = $(this).closest(".groupcontainer");
    target.clone(true, true).appendTo(target.parent());
    // alternatively you can also use .insertAfter() to
    // place the clone after the cloned element rather
    // than at the end of all cloned elements
    // https://api.jquery.com/insertAfter/
    /* target.clone(true, true).insertAfter(target); */
  });
});

＆＃13;

.groupcontainer {
  background-color: white;
  height: 225px;
  float: left;
  margin-top: 10px;
}

.group {
  font-family: Arial;
  margin-right: 20px;
  font-size: 12px;
  float: left;
  background-color: black;
  padding: 2px;
  color: white;
  clear: both;
  display: inline-block;
}

.quantity {
  font-family: Arial;
  font-size: 12px;
  float: left;
  background-color: black;
  padding: 2px;
  display: inline-block;
  color: white;
}

.system {
  float: left;
  background-color: black;
  padding: 2px;
  display: inline-block;
  color: white;
  font-family: Arial;
  font-size: 12px;
}

.total {
  float: left;
  background-color: black;
  padding: 2px;
  display: inline-block;
  color: white;
  font-family: Arial;
  font-size: 12px;
}

.specs {
  float: left;
  width: 648px;
  min-height: 50px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  clear: both;
}

.specs table {
  width: 650px !important;
}

.specs table tr {
  background-color: white !important;
}

.specs table tr td {
  font-family: Arial !important;
  font-size: 9px !important;
  padding: 0px !important;
  margin: 0px !important;
  color: black !important;
  border-bottom: 1px solid black;
}

.specs table tr td span {
  color: black !important;
  font-family: Arial !important;
  font-size: 9px !important;
  padding: 0px !important;
  margin: 0px !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="groupcontainer">
  <div class="group">
    <label for="exampleInputText">Group: </label>
    <input type="text" name="group_1" id="group_1" onchange="updateDue()" />
  </div>

  <div class="quantity">
    <label for="exampleInputText">Quantity: </label>
    <input type="text" name="quantity1" id="quantity1" onchange="updateDue()" />
  </div>

  <div class="total">
    <label for="exampleInputText">System Price:</label>
    <input type="text" name="systemprice" id="systemprice" onchange="updateDue()" />
  </div>

  <div class="system">
    <label for="exampleInputText">Group Total:
      <script type="text/javascript">
        // Library ready to use:
        accounting.formatMoney(5318008);

      </script>
    </label>
    <input type="text" name="grouptotal" id="grouptotal" onchange="updateDue()" />
  </div>

  <!--begin the specs here-->

  <div class="specs">

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    <button>Clone all p elements, and append them to the body element</button>

  </div>
</div>

＆＃13;

Answer 2

想要更新此内容以防其他人看到它。最后，最好的答案是：

$('#clone').click(function() {
    var target = $('.groupcontainer:last');
    target.clone(true, true).insertAfter(target);
  });

$（.groupcontainer:last）代替$(this).closest(".groupcontainer")效果很好，因为对按钮的位置没有限制。我在计划移动按钮的问题中忽略了提及。

Answer 3

您需要在页面加载时定义.groupcontainer的第一个实例。这将找到单个组容器并使其成为变量。

然后当您单击时，它会将一个新的（单个实例）组容器附加到您的容器中。

$(document).ready(function(){
    var clonedGroupContainer = $('.groupcontainer').clone();
    $('.groupcontainer').click(function(){
        $(this).append(clonedGroupContainer);
    });
});

<强>更新

因为我们正在使用单个克隆实例，所以DOM认为只有一个实例，而且基本上它只是移动克隆（即使它会去同一个地方）。

所以我们要做的就是立即创建第一个元素的克隆，然后将其附加到任何地方（我只是附加到主体上以方便），然后我们隐藏它。它并不重要，因为元素将被隐藏（只是不要将它克隆到自身）。然后每次我们点击时，它都会创建该对象的新克隆，我们每次都可以操作该新克隆。

$(document).ready(function(){
    var clonedGroupContainer = $('.groupcontainer').clone();
    $('body').append(clonedGroupContainer);
    clonedGroupContainer.addClass('clone').hide();
    $(document).on('click', '.groupcontainer', function(){
        var clonedGroupContainer2 = $('.clone').clone();
        $(this).append(clonedGroupContainer2);
        clonedGroupContainer2.removeClass('clone').show();
    });
});

Answer 4

您正在选择整个班级.groupcontainer，而$(".groupcontainer")将实际返回一个包含此类所有元素的数组。为什么不尝试按照它的ID来选择元素。这样你就只会选择一个元素并克隆它不应该成为一个问题。

Answer 5

问题在于$('.groupcontainer')使用groupcontainer类抓取所有元素。您可以使用.last()抓取最新版本，然后使用.parent()获取.groupcontainer的父级并附加到该位置。

var $groupContainer = $('.groupcontainer');
$groupContainer.last().clone().appendTo($groupContainer.parent());

Answer 6

在单击处理程序中选择容器的时间至关重要。在第一次单击时，只有一个容器，您可以克隆它并将其附加到自身。第二次单击时，您有两个容器。您选择两者，并将它们附加到自身，从而导致指数行为。

将您的选择器限制为仅一个或将第一个容器存储在引用变量中。

$(document).ready(function() {
    var $container = $('.groupcontainer');

    $container.find('button').click(function() {
        $container.clone().appendTo($container);
    }
});

JQuery - 克隆DIV与按钮重复不正确

6 个答案: