javascript 使用jQuery查找孩子的索引?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10460815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 09:57:33  来源:igfitidea点击:

find index of child using jQuery?

javascriptjqueryhtml

提问by Hailwood

If I have an html structure like:

如果我有一个 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>

and I have a click handler defined through ($('#parent.child')).click()and then I click on the div with the class of second(first, second, thirdclasses have simply been added to make demo clearer) is there a simple way to get the number 1 as it is the second child? (0 based index)?

并且我通过定义了一个点击处理程序($('#parent.child')).click(),然后我点击了类的 div secondfirst, second, third只是添加了类以使演示更清晰)是否有一种简单的方法来获取数字 1,因为它是第二个孩子?(基于 0 的索引)?

Something like $(this).index

就像是 $(this).index

回答by James Allardice

Just have a look at the jQuery API. The method you suggest, index, is exactly right:

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

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

From the docs:

从文档:

If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

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

Also note that I've changed the selector slightly from your example. I'm guessing that was just a typo in your question though. #parent.childwill look for an element with ID "parent" and a class of "child", but you actually want #parent .child(note the space) to find elements with class "child" that are descendants of an element with ID "parent".

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

回答by kapa

The index()method can be used for getting the position of an element inside a collection. In basic circumstances, $(this).index()should work.

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

But with more specific collections, you can get the position with collection.index(item). Imagine adding something simple into your #parentthat should not be counted when measuring index()(a span, img, anything). With the simple method, your code is likely to break, but with the specific method, it won't.

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

Something like this should work for you:

像这样的事情应该适合你:

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

jsFiddle Demo

jsFiddle 演示