Databases
StackOverflow2013
Postsdbo
POAdd class to each level of ul li using jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd class to each level of ul li using jquery
    text
    copied!<p>Well, i have this nested ul, wich are parent -> child -> (grand)child levels,<br /> <strong><em>how can I use jquery to spot every level adding a class to it so i can style each level differently</em></strong>?<br /> (would be something like <a href="https://i.imgur.com/Zs3CYIg.png" rel="nofollow noreferrer">http://i.imgur.com/Zs3CYIg.png</a> ).<br /> I couldn't do it with css because it needs to work fine at least on IE 7</p> <pre><code>&lt;ul class="lista-regioes"&gt; &lt;li class="cat-item cat-item-3 i-have-kids"&gt; &lt;a href="http://localhost/poraidemochila/site/?local-destino=brasil" title="Ver todos os posts arquivados em Brasil"&gt;Brasil&lt;/a&gt; &lt;ul class="children"&gt; &lt;li class="cat-item cat-item-13"&gt; &lt;a href="#" title="#"&gt;Norte&lt;/a&gt; &lt;/li&gt; &lt;li class="cat-item cat-item-4 i-have-kids"&gt; &lt;a href="#" title="#"&gt;Sul&lt;/a&gt; &lt;ul class="children"&gt; &lt;li class="cat-item cat-item-5"&gt; &lt;a href="http://localhost/poraidemochila/site/?local-destino=parana" title="Ver todos os posts arquivados em Paraná"&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 dinamically generated, so i can't use them in css the class <code>.i-have-kids</code> is added by the following js wich 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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload