Добавьте классы к двухуровневой навигации с помощью javascript

Question

У меня простая навигация с двумя уровнями. Элементы li первого уровня должны получить class = "n11", элементы второго класса = "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

Вы можете просто получить элементы <li> первого уровня, а также элементы <li> второго уровня, используя дочерний комбинатор > для родительского элемента <ul> первого уровня и второго level <ul> родительский элемент, и теперь вы можете просто l oop через каждый элемент списка и добавить имя класса соответственно следующим образом:

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 или вы используете компилятор JavaScript, такой как Babel, вы можете еще больше сократить и упростить выше JavaScript с использованием метода forEach () и функций стрелок, таких как:

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>

Answer 2

Вы можете использовать селектор запросов ">", чтобы найти li элементы, у которых родительский элемент .nav1-1, а затем добавить класс n11 к каждому. Промойте и повторите для элементов li, у которых родительский элемент равен .nav1-2.

. Здесь это в коде.

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