将类添加到4级mega菜单的每个子菜单级别

Question

我的js非常初级。我正在构建一个WordPress主题(JointsWP框架)中的4级超级菜单，我希望每个级别都有不同的标签。关节已经对第一个子菜单执行了此操作，但需要使其余的子菜单彼此不同。我想要的：

<ul id="main-nav">
    <ul class="first-sub">
         <ul class="second-sub">
            <ul class="third-sub">

我得到的最好结果是：

<ul id="main-nav">
    <ul class="first-sub">
         <ul class="second-sub">
            <ul class="second-sub third-sub">

我试着删除第四级的“第二级”类，我试着用">“来定位第二级。两者都没有任何运气。到目前为止，我正在使用的是：

$(document).ready(function() {
    $('#main-nav ul ul').addClass('second-sub');
    $('#main-nav ul ul ul').addClass('third-sub');
});

我认为这是一件非常简单的事情，我在论坛上找不到它，因为“恶”。感谢您的帮助。

Answer 1

您可以使用second-sub的not()来排除任何子体

$('#main-nav ul ul').not('#main-nav ul ul ul').addClass('second-sub');
$('#main-nav ul ul ul').addClass('third-sub');

Answer 2

您可以循环所有的子类，并向其中添加类。使用此功能，您可以添加任意数量的关卡。只需将相应的类名添加到数组中。

var classes = ['red', 'blue', 'green']

$('#main-nav').find('*').each(function(index) {
  $(this).addClass(classes[index])
})

演示：JSFiddle