Question

I have an ul list and I want to add and remove classes with jQuery.
I want at first all links from list to have a class top-level, but if I have an sub menu in the ul to remove top-level class. After this I want to find all list items with the top-level class and wrap the link in it.

$("ul#top-menu li").addClass('top-level');
$("ul#top-menu li ul.sub-menu li").removeClass('top-level');
$('ul#top-menu li.top-level a').wrapInner('<b></b>');

The problem with this code is that it will remove the class from the list item, but after the wrap inner is added.

My question is how to execute the wrapInner function after all the classes are in the right order.

Thank you!

Answer 1

Just use more specific selectors instead of adding a class to every li then removing a class from the nested ones:

$("ul#top-menu > li").addClass('top-level');
$('ul#top-menu > li.top-level > a').wrapInner('<b></b>');

The > (child selector) means “target only direct children, not all children.”