将 class 添加到 4 级超级菜单的每个子菜单级别

Question

我的js还很初级。我正在 WordPress 主题（JointsWP 框架）中构建一个 4 级大型菜单，我希望每个级别都被标记为不同的东西。 Joints 已经为第一个子菜单执行此操作，但需要其余的子菜单相互区分。我想要的：

<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">

我试图删除第 4 级的“second-sub”class，我尝试使用“>”仅针对 second-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

您可以循环所有子项并向其添加 classes。有了这个，您可以根据需要添加任意数量的级别。只需将相应的 class 名称添加到数组即可。

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

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

演示：JSFiddle

add class to each submenu level of 4-level mega menu