Question

0

199

Views

How to add different classes in each level of ul li using javascript

I am trying to get different classes for each ul li as mentioned below in code. The code I have tried so far is in jQuery, But I need this to be achieved in vanilla Javascript

Any help will be appreciated !!

   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>

enter image description here

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-13T06:11:26.423Z

This is how you could achieve this in vanilla JavaScript, the details of it are a bit complicated and don't really fit in an answer, because each of these methods used here and the jQuery ones you used above all have specific behaviours and backgrounds which are further explained in the respective documentations:

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`);
    }
}

0

199

How to add different classes in each level of ul li using javascript

1 answers

0

Find remote jobs

Andres GPT