jQuery - сделать что-то после удаления класса

Question

У меня есть список ul, и я хочу добавлять и удалять классы с помощью jQuery.Я хочу, чтобы сначала все ссылки из списка имели класс верхнего уровня, но если у меня есть подменю в ul, чтобы удалить класс верхнего уровня.После этого я хочу найти все элементы списка с классом верхнего уровня и обернуть в него ссылку.

$("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>');

Проблема с этим кодом состоит в том, что он удалит класс из элемента списка, но последобавлена ​​внутренняя оболочка.

Мой вопрос заключается в том, как выполнить функцию wrapInner после того, как все классы расположены в правильном порядке.

Спасибо!

Answer 1

Просто используйте более конкретные селекторы вместо добавления класса к каждому li и удаления класса из вложенных:

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

> (дочерний селектор) означает «нацеливаться только на прямых детей, а не на всех детей».