JSFiddle - React, Tailwind, and code Playground

by michaelschmid

HTML

<ul class="parent">
    <li>L1
    <ul>
      <li>L2
        <ul>
          <li>L3</li>
        </ul>
      </li>
      <li>
        <ul>
          <li>L3
            <ul></ul>
          </li>
        </ul>
      </li>
    </ul>
    </li>
  </ul>

CSS

.level-1{

    background:red;

}
.level-2{
    background:green;
}
.level-3{
    background:blue;
}

JavaScript

$('.parent ul').addClass(function(){
   var cssClass = "level-" + $(this).parents('ul').length;
														console.log("attach class:" + cssClass)
														return cssClass;
});