为 4 级超级菜单的每个子菜单级别添加类

问题描述

我的 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”类，我尝试使用“>”来定位第二个子级。两者都没有运气。这是我目前正在使用的：

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

我认为这是在论坛中找不到的非常简单的事情之一，因为“废话”。任何帮助表示赞赏。

解决方法

您可以对 not() 使用 second-sub 以排除任何后代

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

,

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

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

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

演示：JSFiddle