JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<nav id="menu">
    <ul>
        <li><a href="#">DEMO</a>
        </li>
        <li><a href="#">DEMO</a>
        </li>
        <li><a href="#">DEMO</a>

            <ul>
                <li><a href="#">DEMO</a>
                </li>
                <li><a href="#">DEMO</a>
                </li>
                <li><a href="#">DEMO</a>

                    <ul>
                        <li><a href="#">DEMO</a>
                        </li>
                        <li><a href="#">DEMO</a>
                        </li>
                        <li><a href="#">DEMO</a>

                            <ul>
                                <li><a href="#">DEMO</a>
                                </li>
                                <li><a href="#">DEMO</a>
                                </li>
                                <li><a href="#">DEMO</a>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

JavaScript

var menuID = '#menu';
var menuItems = $(menuID).find('ul');

$(menuItems).each(function () {
    var Startlevel = $(this).parents(menuItems).length;
    $(this).addClass('item-' + $('#menu ul.level-' + Startlevel).length + ' level-' + Startlevel);

});