仅为第一个按钮添加处理程序

Adding a handler for the first button only

本文关键字：处理 程序 添加 按钮 第一个      更新时间：2023-09-26

页面上有一个div，它包含一些具有相同类但没有id的按钮。我希望能够为它添加一个处理程序，但只针对第一个按钮:

  $(document).on("click", "#my_div .some_class", function() {
    alert("yes");
  });

代码将一个处理程序添加到my_div中带有特定类的所有按钮。如何对第一个按钮做同样的事情?

:我在页面上动态地删除和添加按钮。在删除之前，这段代码工作得很好，这意味着它只适用于第一个按钮，而不是任何其他按钮，这就是我想要的:

$(document).on("click", "#my_div .some_class:eq(0)", function() {
  alert("yes");
 });

然而，在之后删除和添加第一个按钮再次动态它不再工作了，但下面这个可以，虽然它适用于所有按钮，这不是我想要的:

$(document).on("click", "#my_div .some_class", function() {
  alert("yes");
});

使用:first-child选择器

$(document).on("click", "#my_div .some_class:first-child", function() {
    alert("yes");
});

working DEMO

编辑:

更新FIDDLE有动态加载元素的用例

jQuery有一个First-Child选择器，它的工作原理与CSS3中的对应选择器非常相似。这将选择位于#my_div中的" .some_class "的第一个实例。

$(document).on("click", "#my_div .some_class:first-child", function() {
    alert("yes");
});

试试这个eq选择器，它接受索引:

$(document).on("click", "#my_div .some_class:eq(0)", function() {
    alert("yes");
});

还有:

gt:选择大于给定索引的倍数。

lt:选择小于给定索引的多个

: 

$(document).delegate("click", "#my_div .some_class:eq(0)", function() {
    alert("yes");
});

检查显示:

if($("selector").is(":hidden")) {
  //
}

还有:

:visible，检查元素是否显示

附加到第一个可见元素

$(document).delegate("click", "#my_div .some_class:visible:eq(0)", function() {
   alert('yes');
}

为您希望拥有处理程序的特定按钮创建唯一ID，并使用该ID来区分按钮。

如果你使用一个类来放置处理程序，那么该类的所有元素都将具有onclick处理程序(只要它适合你的查询"#my_div .some_class")

你试过第一个孩子了吗?

, 

  $(document).on("click", "#my_div .some_class:first-child", function() {
    alert("yes");
  });

但首先，请检查您的控制台是否可以使用此选择器找到第一个子节点?

  $("#my_div .some_class:first-child")
相关文章：