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