Question

I have a multi-level lists like this:

<ul>
    <li>Item 1
        <ul>
            <li>Item 1's 1st Child
                <ul>
                    <li>Item 1's 1st Grandchild
                        <ul>
                            <li>Item 1's Grand Grandchild</li>
                        </ul>
                    </li>
                    <li>Item 1's 2nd Grandchild</li>
                    <li>Item 1's 3rd Grandchild</li>
                </ul>
            </li>
            <li>Item 1's 2nd Child</li>
            <li>Item 1's 3rd Child</li>
        </ul>
    </li>
    <li>Item 2</li>
</ul>

I want for each li to have class ‘level’ according to their positions. The result would be like this:

<ul>
    <li class="level-1">Item 1
        <ul>
            <li class="level-2">Item 1's 1st Child
                <ul>
                    <li class="level-3">Item 1's 1st Grandchild
                        <ul>
                            <li class="level-4">Item 1's Grand Grandchild</li>
                        </ul>
                    </li>
                    <li class="level-3">Item 1's 2nd Grandchild</li>
                    <li class="level-3">Item 1's 3rd Grandchild</li>
                </ul>
            </li>
            <li class="level-2">Item 1's 2nd Child</li>
            <li class="level-2">Item 1's 3rd Child</li>
        </ul>
    </li>
    <li class="level-1">Item 2</li>
</ul>

Is there a way to achieve this with jQuery?

Thank you very much for your attention.

Answer 1

Think this is a generic solution:

var current = $('ul:first');
var depth = 1;

while (current.length) {
  current = current.children('li').addClass('level-' + depth++).children('ul');
};