使用 javascript 将类添加到二级导航

Question

我有一个简单的两级导航。第一层的li-elements应该得到class="n11"，第二层的li-elements应该得到class="n12".

这会将 class="n11" 写入每个 li 元素。

var firstNavi = document.getElementsByClassName("nav1-1");
for(var i = 0; i < firstNavi.length; i++) {
    var firstLi = firstNavi[i].querySelectorAll("li");
    for(var i = 0; i < firstLi.length; i++) {
        firstLi[i].classList.add("n11");
    }
}

<ul class="nav1-1">
    <li ><a href="">1.1.</a></li>
    <li ><a href="">1.2</a>
        <ul class="nav1-2">
            <li><a href="">1.2.1</a></li>
            <li><a href="">1.2.2</a></li>
        </ul>
    </li>
    <li><a href="">1.3</a>
        <ul class="nav1-2">
            <li><a href="">1.3.1</a></li>
            <li><a href="">1.3.2</a></li>
        </ul>
    <li><a href="">1.4</a></li>
</ul>

如何实现将 class="n12" 写入第二个 li 元素，而 class="n11" 仅写入第一级条目？谢谢你的帮助。

Answer 1

您可以使用“>”查询选择器查找具有 .nav1-1 父级的 li 个元素，然后向每个元素添加 class n11。冲洗并重复具有 .nav1-2.

父元素的 li 元素

这是代码。

'use strict';

const li1s = document.querySelectorAll('.nav1-1 > li');

for (const li of li1s)
  li.classList.add('n11');

const li2s = document.querySelectorAll('.nav1-2 > li');

for (const li of li2s)
  li.classList.add('n12');

<ul class="nav1-1">
    <li ><a href="">1.1.</a></li>
    <li ><a href="">1.2</a>
        <ul class="nav1-2">
            <li><a href="">1.2.1</a></li>
            <li><a href="">1.2.2</a></li>
        </ul>
    </li>
    <li><a href="">1.3</a>
        <ul class="nav1-2">
            <li><a href="">1.3.1</a></li>
            <li><a href="">1.3.2</a></li>
        </ul>
    <li><a href="">1.4</a></li>
</ul>

Answer 2

您可以只检索第一级 <li> 元素以及第二级 <li> 元素，方法是使用第一级父级 child combinator > <ul> 元素和第二级 <ul> 父元素，现在您可以遍历每个列表元素并相应地添加 class 名称，如下所示：

const firstLevel = document.querySelectorAll('.nav1-1 > li');
const secondLevel = document.querySelectorAll('.nav1-2 > li');

for (var i = 0; i < firstLevel.length; i++) {
  firstLevel[i].classList.add('n11');
}
for (var i = 0; i < secondLevel.length; i++) {
  secondLevel[i].classList.add('n12');
}

<ul class="nav1-1">
    <li ><a href="">1.1.</a></li>
    <li ><a href="">1.2</a>
        <ul class="nav1-2">
            <li><a href="">1.2.1</a></li>
            <li><a href="">1.2.2</a></li>
        </ul>
    </li>
    <li><a href="">1.3</a>
        <ul class="nav1-2">
            <li><a href="">1.3.1</a></li>
            <li><a href="">1.3.2</a></li>
        </ul>
    <li><a href="">1.4</a></li>
</ul>

如果你不关心IE 11兼容性或者你正在使用像Babel这样的JavaScript编译器，你可以使用forEach()方法进一步缩短和简化上面的JavaScript箭头函数如下：

const firstLevel = document.querySelectorAll('.nav1-1 > li');
const secondLevel = document.querySelectorAll('.nav1-2 > li');

firstLevel.forEach(e => e.classList.add('n11'));
secondLevel.forEach(e => e.classList.add('n12'));

<ul class="nav1-1">
    <li ><a href="">1.1.</a></li>
    <li ><a href="">1.2</a>
        <ul class="nav1-2">
            <li><a href="">1.2.1</a></li>
            <li><a href="">1.2.2</a></li>
        </ul>
    </li>
    <li><a href="">1.3</a>
        <ul class="nav1-2">
            <li><a href="">1.3.1</a></li>
            <li><a href="">1.3.2</a></li>
        </ul>
    <li><a href="">1.4</a></li>
</ul>

使用 javascript 将类添加到二级导航

Add classes to two level navigation with javascript

html

javascript

menu

使用 javascript 将 类 添加到二级导航

Add classes to two level navigation with javascript

html

javascript

menu

使用 javascript 将类添加到二级导航