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

Answer 1

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

Answer 2

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