如何使用javascript遍历具有特定类的每个div？答案

【问题标题】：How to loop through each div with specific class using javascript?如何使用javascript遍历具有特定类的每个div？
【发布时间】：2021-10-04 12:16:29
【问题描述】：

我正在尝试搜索常见问题页面，该页面将隐藏没有用户输入的关键字的结果。现在搜索仅突出显示关键字，我为每个问题分配了 div 类“常见问题-题”。所以我试图用类“faq-question”遍历每个div，检测用户搜索的关键字是否存在（那些关键字分配标签“mark”），然后如果div =“faq-”则更改本节的背景question”包含标签。我的代码现在突出显示所有 divs="faq-question" 而不是那些在里面有  的。我该如何解决这个问题？

HTML

<input type="text" id="keywords" placeholder="Search on the page..."></input>
<div class="faq-question"><h4>What is Lorem Ipsum?</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<p></div>
<div class="faq-question"><h4>Why do we use it?</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p></div>

Javascript：

//Hide unrelated search results
var question = document.getElementsByClassName("faq-question");
var keyword = document.querySelector("mark");


for(x = 0; x < question.length; x++) {
    if(typeof(keyword) != 'undefined' && keyword != null){
        question[x].style.backgroundColor = "#FFFF00";
        console.log("shown");
    } else {
        question[x].style.backgroundColor = "#FFFFFF";
        console.log("hidden");
    }
}

编辑： 标签是一个动态值。问题是关于循环的，但要明确一点：例如，您在<input id="keywords"> 中输入“lorem”。然后html会变成

<h4>What is <mark>Lorem</mark> Ipsum?</h4>

...等等。所以我只在这种情况下使用 标签来检测 div 是否有匹配任何用户正在搜索的关键字

【问题讨论】：

关键字不会是未定义的，检查是没用的。您对关键字什么都不做，所以不确定您要做什么？查看文本是否匹配？
你真的有元素吗？
@maroun 最好你也可以共享 HTML 结构。
刚刚添加了 html。标签由我使用的 Hilitor 框架分配。因此，无论用户输入什么，都会被包裹在标记中，并像 ctrl+f 一样突出显示。在这种情况下，我只是使用标记来检查输入的搜索关键字是否与 div 内容匹配
不确定mark 标记对问题的重要性 - 只是因为循环中的问题有关键字，或者没有，对吧？

标签： javascript html css for-loop

【解决方案1】：

只是简单的拼写错误。您将变量声明为问题，因此在 for 循环中应该是 questions 而不是 question

所以代码将是

<input type="text" id="keywords" placeholder="Search on the page..."></input>
<div class="faq-question"><h4>What is <mark>Lorem Ipsum?<mark></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<p></div>
<div class="faq-question"><h4>Why do we use it?</h4>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p></div>

    var questions = document.getElementsByClassName("faq-question");


    for(x = 0; x < questions.length; x++) {
    if(questions[x].getElementsByTagName('mark').length){
        questions[x].style.backgroundColor = "#FFFF00";
        console.log("shown");
    } else {
        questions[x].style.backgroundColor = "#FFFFFF";
        console.log("hidden");
    }
}

【讨论】：

感谢您的关注，但这并不能解决问题
随心所欲，给你答案
非常感谢！像魅力一样工作！

【解决方案2】：

选择所有问题，检查元素是否作为子元素存在，如果存在，切换一个类。

document.querySelectorAll(".faq-question").forEach(function(elem) {
  const hasMarks = elem.querySelectorAll("mark").length > 0;
  elem.classList.toggle("hasMatch", hasMarks);
});

.hasMatch {
  background-color: lime;
}

<div class="faq-question">
  <h4>What is Lorem Ipsum?</h4>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    <p>
</div>
<div class="faq-question">
  <h4>Why do we use it?</h4>
  <p>It is a long established <mark>fact</mark> that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>

【讨论】：