jQuery 仅在我当前所在的 div 中添加内容

Question

如何制作一个选择器，使 jQuery 仅在我当前所在的 div 中添加内容？ div 在 php foreach 循环中，所以我不想要 div 的任何 id 或类。

这是html的结构:

<div>
   <ul class="menu-category">
      <li>Some stuff</li>
      <li class="newrow"></li> <!-- added when clicking on p.add -->
      <li class="edit"><p class="add">Add</p></li>
   </ul>
</div>

<div>
   <ul class="menu-category">
      <li>Some stuff</li>
      <li class="newrow"></li> <!-- added when clicking on p.add -->
      <li class="edit"><p class="add">Add</p></li>
   </ul>
</div>

这个 jQuery 脚本可以: 当<p class="add">单击 -> 在 <li class="edit"> 之前添加一行.

// Add new row
$(document).ready(function() {
   $('.menu-category > li ul li p.add').click(function(){
      $('.menu-category > li ul li.edit').before("<li class='newrow'><h6>New item</h6><div><p>Maträtt:</p><input type='text' name='name_[]' placeholder='namn' /></div><div><p>Ingredienser:</p><input type='text' name='ingredients_[]' placeholder='ingredienser' /></div><div><p>Pris:</p><input type='text' name='price_[]' placeholder='Pris' /></li>");
   });
});

脚本问题:它添加了 <li class="newrow">给所有的div。我希望它只发生在我点击 p.add 的 div 上。

Answer 1

这里的技巧是找到相对于被点击的p.add 元素的li。

在点击处理程序中 this 将指向被点击的 p.add 然后你可以使用 closest() 找到最近的父级 li.edit

$(document).ready(function() {
   $('.menu-category > li ul li p.add').click(function(){
      $(this).closest('li.edit').before("<li class='newrow'><h6>New item</h6><div><p>Maträtt:</p><input type='text' name='name_[]' placeholder='namn' /></div><div><p>Ingredienser:</p><input type='text' name='ingredients_[]' placeholder='ingredienser' /></div><div><p>Pris:</p><input type='text' name='price_[]' placeholder='Pris' /></li>");
   });
});