CODEWITHSUNDEEP
javascripthtml-listsparent-childqueryselector
Ren Jitsm
Ren Jitsm

Reputation: 447

How to use variable inside querySelectorAll to select direct child

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>

Upvotes: 1

Views: 2332

Answers (2)

aerial
aerial

Reputation: 1198

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>

Upvotes: 1

Alaa
Alaa

Reputation: 235

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>

Upvotes: 1

Related Questions