我想找到具有特定类别的所有元素。我的 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)}谢谢你的帮助
2 回答
慕桂英546537
TA贡献1848条经验 获得超10个赞
CSS 中的大于号 ( >) 选择器用于选择具有特定父级的元素。它被称为元素>元素选择器。它也称为子组合选择器，这意味着它仅选择父元素的直接子元素。它看起来只是标记结构的下一层，而不是更深入的部分。不选择不是指定父级的直接子级的元素。
相反，您应该使用 awhite space来匹配元素的所有后代
const clickedFaq = document.querySelectorAll(`div#faq-1 div.lol`);
console.log(clickedFaq)
<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>
吃鸡游戏
TA贡献1829条经验 获得超7个赞
您想要使用后代组合器而不是子组合器。
这意味着在选择器中替换>为空格 。
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>
添加回答
举报
0/150
提交
取消