Question

这是我页面上的简单代码：

<div class="list-container">
    <div class="single-list-item">
        <button>Remove</button>
    </div>
    <div class="single-list-item">
        <button>Remove</button>
    </div>
    <div class="single-list-item">
        <button>Remove</button>
    </div>
</div>
<p><button class="add-list-item">Add</button></p>

<div class="list-container">
    <div class="single-list-item">
        <button>Remove</button>
    </div>
    <div class="single-list-item">
        <button>Remove</button>
    </div>
    <div class="single-list-item">
        <button>Remove</button>
    </div>
</div>
<p><button class="add-list-item">Add</button></p>

<div class="list-container">
    <div class="single-list-item">
        <button>Remove</button>
    </div>
    <div class="single-list-item">
        <button>Remove</button>
    </div>
    <div class="single-list-item">
        <button>Remove</button>
    </div>
</div>
<p><button class="add-list-item">Add</button></p>

在每个.list-container内，我尝试通过点击其下方的.single-list-item按钮添加新的.add-list-item。这是我正在使用的代码：

$(".add-list-item").on("click", function() {
    $(".single-list-item").last().clone().appendTo(".list-container");
});

当我在页面上只有一次结构时，这工作正常，因为我使用ID（即#list-container），但现在有多个，我必须更改为类，我遇到了问题。也就是说，每当我按下＆＃34;添加＆＃34;按钮，它向每个容器添加一个新的.single-list-item。

我相信我需要使用.closest()来指定一个特定的容器，但我不确定如何＆＃34;追加到最近的＆＃34;。另请注意，＆＃34;添加＆＃34;按钮在容器中不。

Answer 1

$(".add-list-item").on("click", function() {
   var $container =$(this).closest('p').prev(".list-container");
   $(".single-list-item:last", $container).clone().appendTo($container);
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/3rs2hbo2/

使用模板化行时，我建议使用隐藏在DOM中某处的单独模板元素。这避免了重复现有内容以及行和边缘情况（如删除最后一个元素）的各种问题

e.g。 https://jsfiddle.net/TrueBlueAussie/3rs2hbo2/1/

模板隐藏在非已知脚本类型

中

<script id="template" type="text/template">
 <div class="single-list-item">
    <button>Remove</button>
  </div>
</script>

使用它的代码变为：

$(".add-list-item").on("click", function() {
   var $container =$(this).closest('p').prev(".list-container");
   $container.append($("#template").html());
});

Answer 2

你必须使用

$(".add-list-item").on("click", function() {
    $(".single-list-item").last().clone().appendTo($(this).closest('p').prev(".list-container‌"));
});

Answer 3

尝试以下内容。希望这会对你有所帮助。

$(".add-list-item").on("click", function() {
    $(this).closest('p').prev('.list-container')
           .append($(".single-list-item:last").clone())
});

克隆最后一个并将项目附加到最近的类

3 个答案: