javascript only - how to filter a specific div class?

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>

开发者_C百科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

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.

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.

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.