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

Startlevel = 0; 
$('#menu > ul').each(function (i) {
        $(this).addClass('item-' + i + ' level-' + Startlevel );
        Startlevel++;
        $(this).find('> li > ul').each(function (i) {
            $(this).addClass('item-' + i + ' level-' + Startlevel );
            Startlevel++;
            $(this).find('> li > ul').each(function (i) {
                $(this).addClass('item-' + i + ' level-' + Startlevel );
                Startlevel++;
            });
        });
    });