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

How do I select a specific instance of an html element in Jquery?

本文关键字：实例 元素 html Jquery 选择      更新时间：2023-09-26

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

问题是当我点击一个todo应用程序上的删除按钮时，请我确认删除每个列表项。当我点击"取消删除"时，它会取消所有的。换句话说，在所有HTML元素上都接收到重复的行为。

我相信这是因为所有的待办事项都是从相同的html生成的。erb模板，在模板中我给每个元素它的ID，所以我可以引用它，但是，因为每个ID是相同的，我不能区分不同的todo包含相同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 %>

Ishita的回答似乎是正确的，但我还没有资格评论他的回答。我觉得你得把"事件"包起来。在$()中定位"，所以它将是:

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

希望对你有帮助。

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

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

下面是操作按钮和链接的方法:

$("#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()

找到一个最适合你的。

相关文章：