21

如果我有一个像这样的 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（first, second, third已简单地添加类以使演示更清晰）的 div 是否有一种简单的方法来获取数字 1，因为它是第二个孩子？（基于 0 的索引）？

就像是$(this).index

4

2 回答 2

33

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

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

从文档：

如果没有参数传递给 .index() 方法，则返回值是一个整数，指示 jQuery 对象中的第一个元素相对于其兄弟元素的位置。

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

于 2012-05-05T10:20:16.560 回答
8

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

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

像这样的东西应该适合你：

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

jsFiddle 演示

于 2012-05-05T10:21:28.590 回答