How can i use variable with document.querySelectorAll to select all the direct <li> child elements. I would like to select the direct <li> tag of main-navigation > ul element and give a red border. I know that it can fix using let firstLevelLi = document.querySelectorAll(".main-navigation > ul > li");. But i am looking for a solution with variable as follows.
let parent = document.querySelector(".main-navigation > ul");
let li = document.querySelectorAll("`${parent}` > ul > li");
I need this to use along with a OOP function. I don't mention my OOP code here as it may be confuse everyone. Thats why i reduced it like this to address the core issue. My code is as follows. Hopes anyone can help me. Thanks in Advance!
let parent = document.querySelector(".main-navigation > ul");
let li = document.querySelectorAll("`${parent}` > ul > li");
li.forEach((el)=>{
el.style.border="2px solid red";
});ul {list-style:none;padding:0;margin:0;font-family:arial;}
ul ul {padding-left:1rem;}
li {padding:.35rem;}<div class="main-navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About +</a>
<ul>
<li><a href="#">Vision</a></li>
<li><a href="#">Mission</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>You can use "parent" instead of "document" in:
let li = parent.querySelector("ul").querySelectorAll('li');
In your case, you need to separate the operation into two queries instead of one since each of the list elements in your example code is in some way a part of a ul element, so the ul > li will actually select all of them.
let li = parent.querySelectorAll("ul > li"); // this will not work as you want
If you expect that there will be multiple child ul, you can select all of them, then loop on and select their list elements.
let li = [];
parent.querySelectorAll("ul").forEach(ul => {
li = [...li, ...ul.querySelectorAll('li')];
});
Here is the full code:
let parent = document.querySelector(".main-navigation > ul");
let li = parent.querySelector("ul").querySelectorAll('li');
li.forEach((el)=>{
el.style.border="2px solid red";
});ul {list-style:none;padding:0;margin:0;font-family:arial;}
ul ul {padding-left:1rem;}
li {padding:.35rem;}<div class="main-navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About +</a>
<ul>
<li><a href="#">Vision</a></li>
<li><a href="#">Mission</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</div>You can use the tagname of parent inside the querySelectorAll:
let parent = document.querySelector('.main-navigation')
let li = document.querySelectorAll(`${parent.tagName} > ul > li`)
li.forEach(el => {
el.style.border = '2px solid red'
})ul {
list-style: none;
padding: 0;
margin: 0;
font-family: arial;
}
ul ul {
padding-left: 1rem;
}
li {
padding: 0.35rem;
}<div class="main-navigation">
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">About +</a>
<ul>
<li><a href="#">Vision</a></li>
<li><a href="#">Mission</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>