CODEWITHSUNDEEP
javascript
Gabriel Lam
Gabriel Lam

Reputation: 103

js get class sub elements in html

I am making a search filter and will disable the title if all sub classes' styles are block

for example, it is a list of students, showing what classes they are taking, if the user selects students who study Math and English then the "CS" title and list should disappear, since there is not cs student who is also taking math and English classes.

The way I am doing it document.getElementsByClassName (selectedClasses), ex: document.getElementsByClassName ('English Math') then I set those style as "", and all other as "block"

but how do I check if all elements inside the class block? I think I need to access sub-elements ( p and a )and check if all of them are blocked? if so how should I do it?

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>

Upvotes: 1

Views: 216

Answers (1)

fsfc
fsfc

Reputation: 36

I think the way you are doing this is not effective. If you want to only display students in the classes the user selects, then you should use class-names, instead of looping through all the child elements.

Setup your HTML like this, with class names, that match the different classes each student is in:

    <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>

Then, when you want to only show students that share all the selected classes, you can use a single FOR loop, like this:

    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"; 
       }
    }

This saves performance, and is cleaner code.

Upvotes: 1

Related Questions