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

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

提问人:Matthew Wright 提问时间:2/14/2021 更新时间:2/14/2021 访问量:327

问:

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

我试图删除第 4 级的“second-sub”类,我尝试使用“>”来仅针对 second-sub。两者都没有任何运气。以下是我目前正在做的事情:

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

我认为这是我在论坛上找不到的简单事情之一,因为“咄”。任何帮助都表示赞赏。

jQuery zurb-foundation 嵌套列表

评论

0赞 Swati 2/14/2021
我没有尝试过,这应该可以工作$('#main-nav ul:eq(1)').addClass('second-sub'); $('#main-nav ul:eq(2)').addClass('third-sub');
0赞 charlietfl 2/14/2021
@Swati 假设每个级别只有一个,这对于大型菜单来说不太可能<ul>
0赞 Swati 2/14/2021
@charlietfl是的,你是对的..如果 OP 可以显示菜单的正确结构,那么目前我只是假设会更清楚。

答:

2赞 charlietfl 2/14/2021 #1

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

$('#main-nav ul ul').not('#main-nav ul ul ul').addClass('second-sub');
$('#main-nav ul ul ul').addClass('third-sub');
1赞 nullishcoalesce 2/14/2021 #2

您可以循环所有子项并向其添加类。有了这个,你可以添加任意数量的关卡。只需将相应的类名添加到数组中即可。

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

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

演示:JSFiddle

评论

0赞 charlietfl 2/14/2021
这是基于无效标记。Op 显示 ul 直接嵌套在 ul 中,这是伪代码,不是有效的 html。它们只能嵌套在 .您的解决方案使用根本行不通<li>find('*')