复制指定父div中的隐藏div

Question

我有一个问题，复制一个div并在它自己的父div中显示它。我有几个div具有相同的复制按钮。但是，该按钮只复制父div中的一个div。它不显示一个div内自己的父div。

在我的例子中，我有四个按钮。当单击其中一个按钮时，应该在您按下的按钮下方显示一个div。但是，它只复制div并将其显示在其中一个按钮下面。我做错了什么?

https://jsfiddle.net/qer6c5b1/

$(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遍历找到相关.newDiv克隆。

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中删除重复元素，或者使用<template />保存要添加的内容。