使用jQuery查找child的索引？

Question

如果我有一个像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简单地添加了类以使演示更清晰)是否有一个简单的方法来获得数字1,因为它是第二个孩子？(基于0指数)？

就像是 $(this).index

Answer 1

只需看看jQuery API.你建议的方法index是完全正确的:

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

来自文档:

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

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

Answer 2

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

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

这样的事情应该适合你：

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

jsFiddle 演示