Question

我有一个列表，当我点击＆＃34;添加＆＃34;时，我想附加每个div。它有效，但每次我点击＆＃34;添加＆＃34;它适用于我所有的div。我想参加我点击的每个div的新div。这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您必须选择this点击按钮父级，如下所示：

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

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

此外，您可以使用closest代替parents

Answer 2

因为您只是将该方法应用于类，并且只要找到该类，该函数就会被执行。

您需要定义该函数应该在click元素的父类上执行。

您可以使用.parents()或.closest()选择器进行相同操作

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

或

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

如果存在具有相同类的多级继承，有时.parents()会产生问题，但在这种情况下它也可以正常工作

Answer 3

$(".content")选择包含该类的所有元素，而您需要根据所选 closest() 方法的.add元素获取该元素。

$(".add").click(function () {
  // inside the handler `this` refers to the dom object of 
  // clicked element and closest can be used to find nearest
  // ancestor element
  $(this).closest(".content").append('<ul class="pricepart"><li><input type="text" /></li></ul>');
});

如何为每个div附加div

3 个答案: