Question

I have a slight issue where i need to count nest level of elements.
Problem is that parent element can hold multiple child elements and child elements can have their own child elements.

Please see from where i want to start count (marked with text “I start here”).

HTML:

<div class="main_set">
    <div class="child_set">
        <div class="child_set">
            <div class="child_set">I start here!</div>
        </div>
        <div class="child_set"></div>
    </div>
    <div class="child_set">
        <div class="child_set"></div>    
    </div>
</div>

I have tried couple things to get count 3.
For example my last attempt:

$(this).closest('.main_set').find('.child_set');

This one obviously returns 6 tho counting all child_sets.

How to count child_set elements from start place to main_set taking into account only nesting. So basically in my example how to get count 3?

Answer 1

You can use parents() from this to find all parents (with a special selector); for the length you have to add one for the current.

alert($(this).parents('.child_set').length + 1);

Also see this example.