如何通过js查找具有相同类的所有子元素

Question

我想找到具有特定类别的所有元素。

我的 HTML 代码：

<div class="pb-30 faq" id="faq-1">

 <div class="flex flex-row">

  <div class="w-20">

    <div class="hw-24 lol close" id="test">

     </div>

   </div>

 </div>

<div class="close-dialog lol" id="test-2">

 <div class="flex flex-col">

    </div>

   </div>

 </div>

我想找到带有 class 的元素lol。

我可以找到第一个孩子，但找不到另一个。这是我的简单js代码：

document.querySelectorAll(".faq").forEach(x => x.addEventListener("click", function(){ 

    faqToggle(this.id)

}))

function faqToggle(id) {

    const clickedFaq = document.querySelectorAll(`div#${id} > div.lol`)

    console.log(clickedFaq)

}

谢谢你的帮助

Answer 1

CSS 中的大于号 ( >) 选择器用于选择具有特定父级的元素。它被称为元素>元素选择器。它也称为子组合选择器，这意味着它仅选择父元素的直接子元素。它看起来只是标记结构的下一层，而不是更深入的部分。不选择不是指定父级的直接子级的元素。相反，您应该使用 awhite space来匹配元素的所有后代const clickedFaq = document.querySelectorAll(`div#faq-1 div.lol`);console.log(clickedFaq)<div class="pb-30 faq" id="faq-1">&nbsp; <div class="flex flex-row">&nbsp; &nbsp; <div class="w-20">&nbsp; &nbsp; &nbsp; <div class="hw-24 lol close" id="test">&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="close-dialog lol" id="test-2">&nbsp; &nbsp; <div class="flex flex-col">&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

您想要使用后代组合器而不是子组合器。这意味着在选择器中替换>为空格 。console.log(document.querySelectorAll(".faq .lol")); <div class="pb-30 faq" id="faq-1">   <div class="flex flex-row">     <div class="w-20">       <div class="hw-24 lol close" id="test">         test       </div>     </div>   </div>   <div class="close-dialog lol" id="test-2">     test     <div class="flex flex-col">     </div>   </div></div>