时间戳

首页 > 解决方案 > js获取html中的类子元素

javascript - js获取html中的类子元素

问题描述

我正在做一个搜索过滤器，如果所有子类的样式都被阻止，我将禁用标题

例如，这是一个学生列表，显示他们正在学习什么课程，如果用户选择学习数学和英语的学生，那么“CS”标题和列表应该消失，因为没有 cs 学生也在学习数学和英语课。

我这样做的方式是document.getElementsByClassName（selectedClasses），例如：document.getElementsByClassName（'English Math'）然后我将这些样式设置为“”，而所有其他样式设置为“block”

但是如何检查类块内的所有元素？我想我需要访问子元素（ p 和 a ）并检查它们是否都被阻止？如果是这样，我该怎么做？

var classes = document.getElementsByClassName("classes");
for (i = 0; i < classes.length; i++) {
  var has_student = false;
  var currentClass = classes[i]
  var students = currentClass.getElementsByClassName("subject")
  for (k = 0; k < class.length; k++) {
    student = students[k]
    if (student !== "block")
      has_student = true;
    break
  }
  if (!has_student)
    class.getElementsByTagName("h2")[0].style.display = "none";

}
<div class="classes">
  <div class="subject">
    <h2 class="clase-title">English</h2>
    <div class="student"><p><a class="English Math History">Student1</a></p></div>
      <div class="student"><p><a class="English Math History">Student2</a></p></div> 
     </div>
     <div class="subject"> 
      <h2 class="clase-title">Math</h2>
      <div class="student"><p><a class="English Math History">Student1</a></p></div>
      <div class="student"><p><a class="English Math History">Student2</a></p></div> 
      <div class="student"><p><a class="Spanish Math History">Student3</a></p></div>
     </div>
     </div>
     <div class="subject"> 
      <h2 class="clase-title">cs</h2>
      <div class="student"><p><a class="CS">Student4</a></p></div>
     </div>
    </div>

标签： javascript

解决方案

我认为您这样做的方式无效。如果您只想在用户选择的班级中显示学生，那么您应该使用班级名称，而不是遍历所有子元素。

像这样设置您的 HTML，使用班级名称，与每个学生所在的不同班级相匹配：

    <div class="class"> 
      <h2 class="class-title">English</h2>
      <div class="student english math history"><p><a class="English Math History">Student1<a></p><div>
      <div class="student english math history"><p><a class="English Math History">Student2<a></p><div> 
     </div>

然后，当您只想显示共享所有选定课程的学生时，您可以使用单个 FOR 循环，如下所示：

    let selectedClasses = "english math"; //you'd get the classes of your selected elements here
    let students = document.getElementsByClassName("student");
    //loops through every student element (p/a) on the page
    for(i = 0; i<students.length;i++){
      //checks if the student DOES not have the selected classes
       if(!students[i].matches(selectedClasses)){
          //changes the display if it does not contain the selected classes
          students[i].style.display = ""; 
       } else {
          //sets to display block, if it does contain the selected classes
          students[i].style.display = "block"; 
       }
    }

这样可以节省性能，并且代码更简洁。

推荐阅读