Question

0

53

Vistas

Target Elements without specific className

I'm new to JS, but I was hoping there might be a selector like document.getElementsByClassName("div:not(div-1)") that selects elements by class name, unless they also have another class name, that I can define.

Basically my project is a list of movies and their genres.
Using an onclick function, if you click on a genre, I'm trying to hide all other movies that don't belong to that genre. Now I'm looking for a way to select the DIVs without having to add a "not-comedy", "not-action", etc… class to every single movie.
So far I got this:

function test() {
  var x = document.getElementsByClassName("movie-div");
  var i;
  for (i=0; i < x.length; i++) {
    if (x[i].style.display === "none") {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  }
}

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-13T11:16:55.233Z

Use querySelectorAll with i.e: the :not() selector

const ELS_x = document.querySelectorAll(".x:not(.zzz)");
ELS_x.forEach(EL => {
  // do something with EL
  EL.classList.toggle("active");
});

.active {background: gold;}

<div class="x">a</div>
<div class="x zzz">b</div>
<div class="x">a</div>

or if you want to do the class check inside the loop use classList.contains()

const ELS_x = document.querySelectorAll(".x");
ELS_x.forEach(EL => {
  if (!EL.classList.contains("zzz")) {
    // do something with NON .zzz Elements
    EL.classList.toggle("active");
  }
});

.active {background: gold;}

<div class="x">a</div>
<div class="x zzz">b</div>
<div class="x">a</div>

if you want to filter out some Elements, use .filter()

const ELS_x = document.querySelectorAll(".x");
const ELS_without_zzz = [...ELS_x].filter(EL => !EL.classList.contains("zzz"));

ELS_without_zzz.forEach(EL => {
   // do something with NON .zzz Elements
   EL.classList.toggle("active")
});

.active {background: gold;}

<div class="x">a</div>
<div class="x zzz">b</div>
<div class="x">a</div>