find index of child using jQuery?

Question

If I have an html structure like:

<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, third classes 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)?

Something like $(this).index

sorry I miss understood there.. i think you want to click on the second div and then somehow know that it is the second div in the event handling code? — , May 05 '12 at 10:14
check the first example on this page http://api.jquery.com/index/ ...hope it helps — Sandeep Rajoria, May 05 '12 at 10:21
possible duplicate of http://stackoverflow.com/questions/4996002/jquery-get-index-of-element-as-child-relative-to-parent/4996037#4996037 — kapa, May 05 '12 at 10:27

score 35 · Accepted Answer · answered May 05 '12 at 10:20

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

$('#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.

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.child will 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".

this guy suggest using delegate: http://stackoverflow.com/a/4996037/359135 but basically has the same answer — , May 05 '12 at 10:26
@gordatron - Delegating the event higher up the DOM tree would likely be preferable, but I'm using `click` since that's what the OP has used in the question. Also, note that `delegate` has been replaced by `on` since jQuery 1.7. — James Allardice, May 05 '12 at 10:28

kapa · Answer 2 · 2012-05-05T10:27:47.900

9

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

But with more specific collections, you can get the position with collection.index(item). Imagine adding something simple into your #parent that 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.

Something like this should work for you:

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

jsFiddle Demo

edited May 05 '12 at 10:27

answered May 05 '12 at 10:21

kapa

77,694
21
158
175

Awesome. Thank you very much. The approved answer didn't help me, but yours did the magic. And your explanation clarified why. Thanks a lot. – Giuseppe Jun 04 '20 at 10:24

find index of child using jQuery?

2 Answers2

Linked