Question

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:

<ul class="sub-menu">
    <li><a href="#">Link</a></li>
    <li><a href="#" class="has_children">Link with children</a>
        <ul class="sub-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#" class="has_children">Link with children</a>
                 <ul class="sub-menu">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul> 
            </li>
         </ul>
    </li>
</ul>     

I want to add a class has_children to each link which has a ul.sub-menu.

My code now is:

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 has_children even if they don’t have a sub-menu.

EDIT [Solution]:

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

})

That did the trick! 🙂 Thanks

Answer 1

You need to change your selector to only match the direct a within the current li otherwise it will match all a within all levels. Use >a to match the direct a only, similar to this:

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

---

DEMO – Matching only the a directly within the current li

---

In the DEMO I removed all the has_children classes you had in the initial HTML to show that indeed they are added as expected by the script.