javascript - 如何为每个div追加div

Question

我有一个列表，当我单击“添加”时，我想附加每个 div。 它有效，但每次我单击“添加”时，它都适用于我的所有 div。我只想为我点击的每个 div 参加新的 div。 这是我的代码:

$(".add").click(function() {
  $(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <ul class="pricepart">
    <li>
      <input type="text" />
      <span class="add">ADD+</span>
    </li>
  </ul>
</div>
<div class="content">
  <ul class="pricepart">
    <li>
      <input type="text">
      <span class="add">ADD+</span>
    </li>
  </ul>
</div>

Answer 1

您必须选择此单击的按钮父级，如下所示:

$(".add").click(function () {
  $(this).parents(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

工作示例:https://jsfiddle.net/k98tw1je/

您还可以使用closest代替parents