JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<ul>
 <li>Odd
  <ul>
   <li>Odd</li>
  </ul>
 </li>
 <li>Even</li>
 <li>Odd</li>
 <li>Even</li>
 <li>Odd</li>
</ul>

JavaScript

var links = document.querySelectorAll("ul li");

for (var i = 0; i < links.length; i++) {
   var link = links[i];
   var parent = link.parentNode;
   var child = parent.firstChild;
   var index = 0;
   
   while (true) {
      if (child.nodeType === Node.ELEMENT_NODE) {
         index++;
      }
      
      if (child === link || !child.nextSibling) {
         break;
      }
      
      child = child.nextSibling;
   }
   
   if (index % 2 == 0) {
      console.log("even");
   }
   else {
      console.log("odd");
   }
}