1

如何制作一个选择器，让 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 上。

4

1 回答 1

6

这里的技巧是找到li与单击p.add元素的相对值。

在点击处理程序this将指向被点击的p.add然后你可以找到最近的父母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>");
   });
});
于 2013-05-29T15:25:48.680 回答