如何在Jquery中选择html元素的特定实例？

Question

我有一个待办事项清单应用程序，允许用户创建待办事项。 现在，我正在使用jquery构建功能，该功能将允许用户删除任务。

问题是，当我单击一个要执行的应用程序上的删除按钮时，要求我确认每个列表项上的删除。 当我在其中一个上单击“取消删除”时，所有这些都将取消。 换句话说， 我在所有HTML元素上都收到重复行为。

我相信这是因为所有待办事项都是从相同的html.erb模板生成的，并且在模板中，我为每个元素提供了ID，以便我可以引用它，但是由于每个ID都是相同的，因此我无法区分包含相同ID元素的不同待办事项。 如何在Jquery中选择html元素的特定实例？

完整的JS代码/ HTML输出： http : //jsfiddle.net/LvKED/

Rails html.erb代码：

<%= form_for task do |form| %>
  <li>
<% if !task.completed %>
    <p> <%= task.title%></p>
    <p>&ndash; <%=task.body %></p>
     <%= form.check_box :completed, class: "completed_checkbox" %>
     <%= button_to "Delete post",{}, class:"delete_button" %>
     <%= link_to "Confirm deletion",{}, class: "confirm_links", id: "confirm_delete" %>
     <%= link_to "Cancel",{}, class: "confirm_links cancel_delete" %>
     </li>
   <% end %>
<% end %>

Answer 1

在事件处理程序中，您可以通过以下代码行获取对该特定项目的引用：

 var targetElement = $(event.target).closest('li');

Answer 2

Ishita的答案似乎是正确的，但我还没有评论他的答案的名声。 我认为您必须将“ event.target”包装在$（）中，这样就可以了：

var targetElement = $(event.target).closest('li');

希望能有所帮助。

Answer 3

这是您将如何操作按钮和链接的方法：

$("#task").on("click",".delete_button",function(){
    $(this).hide();
    $(this.form).next('.confirm_links').show()
    .next('.confirm_links').show();
    return false;
});

$("#task").on("click",".cancel_delete",function(){
    $(this).hide()
    .prev(".confirm_links").hide()
    .prev('form').find(".delete_button").show();
    return false;
});

按钮/链接演示： http : //jsfiddle.net/fiddleyetu/LvKED/5/

该演示仅展示了一种从多个可能共享同一选择器的元素中定位一个元素的方法。 您可以使用的其他有用的jQuery功能包括：

jQuery.closest()
jQuery.nextUntil()
jQuery.prevUntil()

找到最适合您的产品。