JQuery

Question

总体上对编程还很陌生，所以这可能不太好。我的问题是当我单击 html (Fiddle)

中的按钮时

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

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

每次按下按钮都需要一个副本（如果可能，附加到自身？？？）
多次复制时，需要父级div一起扩展

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

至于 #2，以这种方式追加是否不允许父级 div 扩展？

我离你还想笑吗？？

Answer 1

您需要在页面加载时定义 .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 2

你正在 select 整个 class .groupcontainer 和 $(".groupcontainer") 将实际上 return 你一个包含来自这个 [=14= 的所有元素的数组].为什么不尝试 select 通过元素的 ID 获取元素。这样你将 select 只有一个元素并且克隆它不应该是一个问题。

Answer 3

问题是 $('.groupcontainer') 抓取所有个 class 为 groupcontainer 的元素。您可以通过使用 .last() then use .parent() 获取 .groupcontainer 的父级并附加到它来获取最新的一个。

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

Answer 4

我建议结合使用 .closest() and .parent() like so (also note my use of the flags for .clone()):

$(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); */
  });
});

.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;
}

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

Answer 5

点击处理程序中的容器 select 的时间是必不可少的。第一次点击时，只有一个容器，您可以克隆它并将其附加到自身。第二次点击你有两个容器。你 select 两者，并将两者附加到自己，导致指数行为。

将您的 selector 限制为仅一个或将您的第一个容器存储在参考变量中。

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

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

Answer 6

想要更新它以防其他人看到它。最后，最佳答案：

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

$(.groupcontainer:last) 而不是 $(this).closest(".groupcontainer") 效果很好，因为对按钮的位置没有限制。我在问题中忘记提到我计划移动按钮。

JQuery - 克隆 DIV 按钮重复错误

JQuery - Clone DIV with button duplicates incorrectly

html

javascript

clone