css - jquery index within a parent class

Question

I need a way to find the index number of one child element.

here is the CSS of it

<div class="parent">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

<div class="parent">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

My jquery code is like this

var number = $(".son").index(this);

When I use this code, it will count the son as a whole. Eg, when I click on the second child element in the second parent class, it will give me a var number 7. I want the son class always start counting from zero.

Answer 1

Try this:

$(this).parent().find('.son').index(this)

As other members mention:

$(this).index()

Does the job, since index() with no arguments returns position of element relative to its siblings.

Documentation:

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.