在特定父母div中重复隐藏div

Question

我在复制DIV并在其自己的父级中显示它有问题。我有几个divs带有相同的重复按钮。但是，该按钮仅在父母div中复制DIV。它不会在其自己的父级内显示DIV。

在我的示例中，我有四个按钮。单击其中一个时，应按下按钮下方显示一个div。但是，它只复制DIV并将其显示在其中一个按钮下方。我在做什么错？

$(document).ready(function() {
  $(".addB").click(function() {
    $(".newDiv")
      .eq(0)
      .clone()
      .insertAfter(".newDiv:last")
      .show();
  });

  $(document).on('click', '.addB button[type=submit]', function(e) {
    e.preventDefault()
    var $frm = $(this).closest('.addB');
    console.log($frm.serialize());
    $.ajax(
      $frm.attr('action'), {
        method: $frm.attr('method'),
        data: $frm.serialize()
      }
    );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

问题归因于您的固定.newdiv：last选择器 - 无论单击哪个按钮，这将始终针对相同的元素。

要解决此问题，您可以从传递给事件处理程序的事件中单击哪个按钮，然后使用DOM Traversal查找相关的.newdiv clone。

jQuery($ => {
  $(".addB").click(e => {
    let $btn = $(e.target);
    $btn.prev('.newDiv').clone().insertBefore($btn).show();
  });
});

.newDiv {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentDiv">
  <div class="newDiv">
    <p>This is the div i need to duplicate #1</p>
  </div>
  <button class="addB">+</button>
</div>

<div class="parentDiv">
  <div class="newDiv">
    <p>This is the div i need to duplicate #2</p>
  </div>
  <button class="addB">+</button>
</div>

<div class="parentDiv">
  <div class="newDiv">
    <p>This is the div i need to duplicate #3</p>
  </div>
  <button class="addB">+</button>
</div>

<div class="parentDiv">
  <div class="newDiv">
    <p>This is the div i need to duplicate #4</p>
  </div>
  <button class="addB">+</button>
</div>

另请注意，我修改了parentDiv类在所有元素中很常见。这是因为增量class和id属性是一种反模式，应避免。

最后，该逻辑假设每个按钮都在其父母内附加不同的内容。如果每次克隆的内容都是相同的，请克隆单个元素并从DOM中删除重复项，或使用＆lt; template /＆gt; < /code>保存要附加的内容。