如何使用javascript在每个级别的ul li中添加不同的类

Question

我正在尝试为每个 ul li 获取不同的类，如下面的代码中所述。到目前为止我尝试过的代码是在 jQuery 中，但我需要在 vanilla Javascript 中实现这一点

任何帮助将不胜感激！

   const topLevel = Array.from(document.querySelector(".main-nav-list > li > ul"))
        .map(({
            parentElement
        }) => parentElement);

    for (const element of topLevel) {
        element.setAttribute(`${element.className} hasChild top`);

        const subLevel = Array.from(element.querySelectorAll("li > ul"))
            .map(({
                parentElement
            }) => parentElement);

        for (const subElement in subLevel) {
            subElement.setAttribute(`${subElement.className} hasChild sub`);
        }
    }

<nav class="main-nav">
    <ul class="main-nav-list">
        <li class="a"> <a href="/">First</a>
            <ul class="main-nav-list">
                <li class="b"> <a href="/">Type of menu</a>
                    <ul class="main-nav-list">
                        <li class="c"> <a href="/">Summer</a> </li>
                        <li class="c"> <a href="/">Winter</a> </li>
                        <li class="c"> <a href="/">All season</a> </li>
                        <li class="c"> <a href="/">Spring </a> </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

这就是你如何在 vanilla JavaScript 中实现这一点的方法，它的细节有点复杂，并不真正适合答案，因为这里使用的每个方法和你上面使用的 jQuery 方法都有特定的行为以及respectivedocumentations中进一步解释的背景：

const topLevel = Array.from(document.querySelector(".main-nav-list > li > ul"))
    .map(({parentElement}) => parentElement);

for (const element of topLevel) {
    element.setAttribute(`${element.className} hasChild top`);

    const subLevel = Array.from(element.querySelectorAll("li > ul"))
        .map(({parentElement}) => parentElement);

    for (const subElement of subLevel) {
        subElement.setAttribute(`${subElement.className} hasChild sub`);
    }
}