如何将 querySelectorAll 中的变量用于 select 直接子项

Question

如何将变量与 document.querySelectorAll 一起使用到 select 所有直接 <li> 子元素。我想select main-navigation > ul 元素的直接<li> 标记并给一个红色边框。我知道它可以使用 let firstLevelLi = document.querySelectorAll(".main-navigation > ul > li"); 修复。但我正在寻找如下变量的解决方案。

let parent = document.querySelector(".main-navigation > ul");
let li = document.querySelectorAll("`${parent}` > ul > li");

我需要它与 OOP 函数一起使用。我没有在这里提及我的 OOP 代码，因为它可能会让每个人感到困惑。这就是为什么我像这样减少它以解决核心问题。我的代码如下。希望有人能帮助我。提前致谢！

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>

Answer 1

您可以在 querySelectorAll:

中使用 parent 的标记名

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>

Answer 2

您可以在以下位置使用“parent”而不是“document”：

let li = parent.querySelector("ul").querySelectorAll('li');

在您的情况下，您需要将操作分成两个查询而不是一个查询，因为示例代码中的每个列表元素在某种程度上都是 ul 元素的一部分，因此 ul > li 将实际上 select 所有人。

let li = parent.querySelectorAll("ul > li"); // this will not work as you want

如果您希望有多个子 ul，您可以 select 所有这些，然后循环 select 它们的列表元素。

  let li = [];
  parent.querySelectorAll("ul").forEach(ul => {
    li = [...li, ...ul.querySelectorAll('li')];
  });

完整代码如下：

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>

如何将 querySelectorAll 中的变量用于 select 直接子项

How to use variable inside querySelectorAll to select direct child

javascript

parent-child

html-lists

queryselector