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.