jQuery tripple nested menu with child menus

admin · Oct 10, 2022

i'm not getting forward in this so i need your help.

It's a triple nested menu for wordpress. And it looks like this:

Code:

&lt;ul class="sub-menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="has_children"&gt;Link with children&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="has_children"&gt;Link with children&lt;/a&gt;
                 &lt;ul class="sub-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt; 
            &lt;/li&gt;
         &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;

I want to add a class

Code:

has_children

to each link which has a

Code:

ul.sub-menu

.

My code now is:

Code:

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function() {
    jQuery('a', this).addClass('has_children');
})

That works for the first ul.sub-menu li but all other child links now have the class

Code:

has_children

even if they don't have a sub-menu.

EDIT [Solution]:

Code:

jQuery.each(jQuery('ul.sub-menu li').has('ul.sub-menu'), function () {
jQuery('&gt;a', this).addClass('has_children');

})

That did the trick!

Thanks

jQuery tripple nested menu with child menus

admin

Administrator

Visitors Online