Hide all DIVs that don't contain all specified classes

Question

On my page I have a large number of DIVs, each DIV represents a specific product, with a series of characteristics. I'm using those characteristics as classes, so every product would start similarly to this:

<div class='classA classB classC classD classE classF'>

  Product Card

</div>

Ideally on my page I'd like to have one

<select>

element for each class, so that when the user select a value from the dropdown, only the

<div>

with the corresponding class remains displayed on the page, while all the others are hidden.

Also, the check on the class has to consider ALL the classes at the same time. By this I mean that if a user selects value from 3 dropdowns, only the

<div>

that have ALL the 3 classes selected will be shown.

I've tried to implement this idea using javascript, with the following code:

function filterPowerInput() {

  var powerInput = document.getElementById("powerInput").value;

  if (powerInput == 1) {

    var myClasses = document.querySelectorAll('.ph3ph'),

      i = 0,

      l = myClasses.length;

    for (i; i < l; i++) {

      myClasses[i].style.display = 'none';

    }

    var myClassesTwo = document.querySelectorAll('.ph1ph'),

      i = 0,

      l = myClassesTwo.length;

    for (i; i < l; i++) {

      myClassesTwo[i].style.display = 'block';

    }

  } else if (powerInput == 3) {

    var myClasses = document.querySelectorAll('.ph1ph'),

      i = 0,

      l = myClasses.length;

    for (i; i < l; i++) {

      myClasses[i].style.display = 'none';

    }

    var myClassesTwo = document.querySelectorAll('.ph3ph'),

      i = 0,

      l = myClassesTwo.length;

    for (i; i < l; i++) {

      myClassesTwo[i].style.display = 'block';

    }

  } else {

    var myClasses = document.querySelectorAll('.ph1ph'),

      i = 0,

      l = myClasses.length;

    for (i; i < l; i++) {

      myClasses[i].style.display = 'block';

    }

    var myClassesTwo = document.querySelectorAll('.ph3ph'),

      i = 0,

      l = myClassesTwo.length;

    for (i; i < l; i++) {

      myClassesTwo[i].style.display = 'block';

    }

  }

}

This example works fine for a class that can only assume 2 values, but it becomes impossible to manage as soon as a class has many more value (they could go up to 12). Also, by using similar version of the code above on different dropdowns, they will override each other, I haven't found a way yet to make them work together as I need.

I hope it's clear enough, otherwise just ask. Thanks a lot for your time as always!

(The rest of my page is a mix of PHP/HTML/Javascript)

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I think this is what you meant

$(function() {
  $(".sel").on("change",function() {
    var classLst = ["selDiv"];
    $(".sel").each(function() {
      var val = this.value;
      if (val) classLst.push("class"+val);
    });
    classLst.sort();
    $(".selDiv").each(function() {
      var divClassLst = $(this).attr("class");
      if (divClassLst) {
        $(this).toggle(divClassLst.split(" ").sort().join(".") == classLst.join("."));
      }  
    }) 
  }).change(); // run when loaded
});

.selDiv { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<b>Note: Possible combinations: </b><i>A,B,C; D,E</i> and <i>C,D</i>
<hr/>
<select class="sel">
  <option value="">Please select</option>
  <option value="A" selected>A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
  </select>
<select class="sel">
  <option value="">Please select</option>
  <option value="A">A</option>
  <option value="B" selected>B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>
<select class="sel">
  <option value="">Please select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C" selected>C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>
<select class="sel">
  <option value="">Please select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>
<select class="sel">
  <option value="">Please select</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>
<div class='selDiv classA classB classC'>
  Product Card A B C
</div>
<div class='selDiv classD classE'>
  Product Card D E 
</div>
<div class='selDiv classC classD'>
  Product Card C D
</div>

Hide all DIVs that don't contain all specified classes

Sign up