javascript only - how to filter a specific div class?

Question

I have many DIVs, let's say 100, split by categories like that :

<div id="div1" class="cat01">text</div>
<div id="div2" class="cat02">text</div>
<div id="div3" class="cat01">text</div>
<div id="div4" class="cat02">text</div>
<div id="div5" class="cat03">text</div>
<div id="div6" class="cat01">text</div>

And I want to filter a specific class
Let's say I click on a button "filter only cat02" I then have only this on the page :

<div id="div2" class="cat02">text</div>
<div id="div4" class="cat02">text</div>

I do not have to use a class to define the categories, but it seems the appropriate solution...

Thanks you VERY much for your help!

EDIT : much clearer

Here is the file :

<div id="principal">
    <div class="abc1 categ1">Text0</div>
    <div class="abc5 categ3">Text0</div>
    <div class="abc4 categ2">Text1</div>
    <div class="abc7 categ1">Text0</div>
    <div class="abc2 categ2">Text2</div>
    <div class="abc4 categ3">Text0</div>
    <div class="abc6 categ1">Text0</div>
    <div class="abc7 categ2">Text3</div>
</div>

and I want this :

Text1
Text2
Text3

casablanca · Accepted Answer · 2011-02-21T21:42:50.010

1

You can do something like this:

var list = document.getElementsByClassName('cat02');
for (var i = 0; i < list.length; i++) {
  // this will remove the node from the page
  list[i].parentNode.removeChild(list[i]);

  // if you just want to hide it, you can do this:
  // list[i].style.display = 'none';
}

Note that getElementsByClassName isn't supported by most browsers -- for those that don't, you may have to use a custom implementation such as the one here.

Update: If all your DIVs are direct children of a single DIV and they each contain only one class, it makes the task much simpler. You can skip getElementsByClassName and instead just iterate over the children:

function showOnly(parent, className) {
  className = ' ' + className + ' ';

  var e = parent.firstChild;
  while (e != null) {
    if (e.nodeType == 1) {
      if ((' ' + e.className + ' ').indexOf(className) > -1)
        e.style.display = 'block';
      else
        e.style.display = 'none';
    }

    e = e.nextSibling;
  }
}

showOnly(document.getElementById('masterdiv'), 'cat02');

Edit: There were a couple of errors previously that I've fixed now. The indexOf comparison should be > -1 instead of > 0 and also the list of children includes empty text nodes (spaces between tags) that should be ignored, hence the check for e.nodeType == 1.

edited Feb 21 '11 at 21:42

answered Feb 21 '11 at 17:29

casablanca

69,683
7
133
150

This will remove/hide the cat02 items, but the poster wants to see only them. – Niklas Wulff Feb 21 '11 at 17:47
@casablanca : thank you very much, do you know if I can hide all the children of a div before showing the category I want? The perfect code would be something like _hide all the div contained in "masterdiv" and then display = "block" the category I want to show_ – jrm Feb 21 '11 at 17:48
thanks @casablanca, does your code works with multiple class DIVs ? like `
– jrm Feb 21 '11 at 17:57
@jrm: It doesn't at the moment (as I mentioned in my answer). You can do that by changing the condition to `if ((' ' + e.className + ' ').indexOf(' ' + className + ' ') > 0)` – casablanca Feb 21 '11 at 18:03
@casablanca : seems interesting but I can make it works : [link](http://jsfiddle.net/zEmmu/1/) – jrm Feb 21 '11 at 18:33

score 1 · Answer 2 · answered Feb 21 '11 at 18:43

1

Seem like jQuery would help a lot here. You could just call $("div[class!='class02']") and get an array of items you want. Then, you could call .addClass('hidden') or whatever you need to do to the other items.

answered Feb 21 '11 at 18:43

Paul Schreiber

12,531
4
41
63

Thanks, I really do not know jQuery, what would be the entire code? – jrm Feb 21 '11 at 18:53
The entire code would be `$("div.principal div[class!='categ2']").hide();`. Check out http://jquery.com/ Just include the jquery.js file in your `` tag. – Paul Schreiber Feb 21 '11 at 20:53
+1 for jQuery, still curious as of why you don't want to use it? – Niklas Wulff Feb 21 '11 at 23:50

score 0 · Answer 3 · edited May 23 '17 at 12:29

A brute force solution:

var list = document.getElementsByTagName('div');
for (var i = 0; i < list.length; i++) {
    if (list[i].className != 'cat02') {
        list{i].style.display = 'hidden';
    }
}

Wrap this in a function to something like this:

function filterDivs(nameToFilter) {
var list = document.getElementsByTagName('div');
for (var i = 0; i < list.length; i++) {
    if (!contains(list[i].className.split(' '), nameToFilter)) {
        list{i].style.display = 'hidden';
    }
}
}

EDIT: using this function to search for strings in an array that I found here

function contains(a, obj) {
    var i = a.length;
    while (i--) {
        if (a[i] === obj) {
            return true;
        }
    }
return false;
}

With only 100 divs, it should run pretty quickly, but if you increase this amount a lot, it will become slow.

I also recommend that you don't remove items from a collection while iterating through it, that will cause you trouble. Hide them instead, or work with different collections.

thanks, does your code works with multiple class DIVs ? like ` — jrm, Feb 21 '11 at 17:56
Ehrm, no... Thanks for pointing that out. Will edit in a minute. — Niklas Wulff, Feb 21 '11 at 17:57

javascript only - how to filter a specific div class?

3 Answers3