title: Add class to each level of ul li using jQuery
body: <p>I have this nested ul, which are parent -&gt; child -&gt; (grand)child levels.</p>
  <p>How can I use jQuery to spot every level adding a class to it so that I can style each level differently?</p>
  <p>would be something like:</p>
  <p><a href="https://i.stack.imgur.com/eSL6B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSL6B.png" alt="enter image description here" /></a></p>
  <p>I couldn't do it with CSS because it needs to work fine at least on IE 7</p>
  <pre><code>&lt;ul class=&quot;lista-regioes&quot;&gt;
      &lt;li class=&quot;cat-item cat-item-3 i-have-kids&quot;&gt;
       &lt;a href=&quot;http://localhost/poraidemochila/site/?local-destino=brasil&quot; title=&quot;Ver todos os posts arquivados em Brasil&quot;&gt;Brasil&lt;/a&gt;
       &lt;ul class=&quot;children&quot;&gt;
          &lt;li class=&quot;cat-item cat-item-13&quot;&gt;
          &lt;a href=&quot;#&quot; title=&quot;#&quot;&gt;Norte&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;cat-item cat-item-4 i-have-kids&quot;&gt;
          &lt;a href=&quot;#&quot; title=&quot;#&quot;&gt;Sul&lt;/a&gt;
          &lt;ul class=&quot;children&quot;&gt;
              &lt;li class=&quot;cat-item cat-item-5&quot;&gt;
                  &lt;a href=&quot;http://localhost/poraidemochila/site/?local-destino=parana&quot; title=&quot;Ver todos os posts arquivados em Paraná&quot;&gt;Paraná&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>the classes <code>.cat-item</code> and <code>.cat-item-#</code> are dynamically generated, so I can't use them in css
  the class <code>.i-have-kids</code> is added by the following js which I found <a href="https://wordpress.stackexchange.com/questions/93627/wp-list-categories-add-class-to-all-list-items-with-children">here</a></p>
  <pre><code> $('li.cat-item:has(ul.children)').addClass('i-have-kids');
  </code></pre>
  <p>but it does not really work since it just looks for elements that have children, and do not separate by levels, as you can see in the markup.</p>