使用 jQuery 查找子项的索引

find index of child using jQuery?

本文关键字：索引 jQuery 查找 使用      更新时间：2023-09-26

如果我有一个像这样的html结构：

<div id="parent">
 <div class="child first">
   <div class="sub-child"></div>
 </div>
 <div class="child second">
   <div class="sub-child"></div>
 </div>
 <div class="child third">
   <div class="sub-child"></div>
 </div>
</div>

我有一个通过($('#parent.child')).click()定义的点击处理程序，然后我单击带有 second 类的div（简单地添加了first, second, third类以使演示更清晰）有没有一种简单的方法可以得到数字 1，因为它是第二个孩子？（基于0的索引）？

类似$(this).index

看看jQuery API。您建议的方法index ，完全正确：

$('#parent .child').click(function() {
    var index = $(this).index();
});

从文档中：

如果没有参数传递给 .index（） 方法，则返回值为 一个整数，指示第一个元素在 jQuery 对象相对于其同级元素。

另请注意，我从您的示例中略微更改了选择器。我猜这只是你问题中的一个错字。 #parent.child将查找 ID 为"parent"的元素和 "child" 类，但您实际上希望#parent .child（注意空格）查找具有类"child"的元素，这些元素是 ID 为"parent"的元素的后代。

index() 方法可用于获取集合中元素的位置。在基本情况下，$(this).index()应该起作用。

但是有了更具体的集合，你可以得到collection.index(item)的位置。想象一下，在你的#parent中添加一些简单的东西，在测量index()时不应该被计算在内（span，img任何东西）。使用简单方法，代码可能会中断，但使用特定方法时，代码不会中断。

这样的东西应该适合你：

var $children = $('#parent .child').click(function​ () {
    console.log($children.index(this));
});​

jsFiddle 演示

相关文章：