document.getElementsByClassName iteration question

[paulclift]

Hey all,

 

Could someone please tell me what I can add to this code to make it so that divs whose class does NOT equal "myclassname" will NOT display?

 

 

var divs = document.getElementsByClassName("myclassname");

for(var i=0; i<divs.length; i++) {

divs.style.display='block';

}

Thanks.

[Don E]

If you use getElementsByClassName("myclassname"), I believe it will only get the elements that have the class name of "myclassname," therefore need to worry about about other divs that don't have a classname of "myclassname" will be displayed?

[paulclift]

Yes, I think that you're right, but would you know how I can tell it to do this:

 

document.getElementsByClassName(NOT "myclassname")

style.display='none'

[Don E]

Instead of the getElememtsByClassName, try getElementsByTagName('div') and in the for loop have something like: if(divs.className != 'myclassname' )

{

divs.style.display= 'none';

 

}

[paulclift]

Thanks for your help.... I tried the following, but it doesn't seem to be working.

 

var divs = document.getElementsByTagName('div');

if(divs.className == 'myclassname' )

{ divs.style.display= 'block'; }

else

{ divs.style.display= 'none'; }

Any ideas what I am missing here?

[Don E]

You're missing the for loop.

 

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    if(divs[i].className == 'myclassname' )    {         divs[i].style.display=  'block';     }    else   {         divs[i].style.display=  'none';     }}

[Hadien]

if your making HTML which could have more than one class at a time, then you'll need to get your hands a little more dirty. If an element has multiple classes, including "myclassname", then that test would give a false negative. so try this.

function hasClass(dom,classname){      var classes = dom.className;   if(classes.length == 0    || typeof classname != "string"    || classname.length == 0)      return false;   var regEx = new RegExp("b"+classname+"b");   return regEx.test(classes);}//later on in your forloopif(!hasClass(divs[i],"myclassname")   divs[i].style.display = "none"

or you could instead write a polyfill to add support to all elements

if(!Element.prototype.hasClass)   Element.prototype.hasClass = function hasClass(name){      if(this.className.length == 0 || typeof name != "string" || name.length == 0)         return false;      return (new RegEx("b"+name+"b")).test(this.className);}// should allow you to simply use it like this…if(!div[i].hasClass("mayclassname"))   div[i].style.display = "none";

EDIT: probably needed to add those word boundaries.EDIT EDIT: somehow a bad zero-space unicode character got added in my example which is why it was erroring the code. I removed it.

Edited December 1, 2013 by Hadien

[paulclift]

Woah, I suddenly feel very out of my depth! I assumed that there was an easy fix for this. If it makes anything simpler, no element has more than one class name, since I am using this purely to hide and show <P> objects (not divs like in my first post)... could you please tell me how to use the code you posted? I tried stupidly cutting and pasting it, keeping the for loop which I already had, but nothing..

[davej]

How about just...

if( divs[i].className.indexOf('myclassname') != -1){//then myclassname was detected}

[Hadien]

I think then classes like "myclassnamefaux" or "blahblahmyclassname" would return false positives, that why I edited in the word boundaries after posting

[paulclift]

Hey guys,

 

So, since I have other divs on the page that I don't want to be affected by this, how can I apply it to multiple classes?

 

<div class="group1 myclassname">

<div id="some-other-thing-which-should-remain-visible">

 

The 'display' variable should only affect divs with 'group1' ..... should be something like the following, I assume?

 

if(spans.className == "group1" + other-variable)

Edited December 1, 2013 by paulclift

[paulclift]

...or perhaps there is a better way, with two 'if's, so that only <divs> of group1 are tested for 'other-variable' ??

[davej]

I think then classes like "myclassnamefaux" or "blahblahmyclassname" would return false positives, that why I edited in the word boundaries after posting

 

 

Of course, you could consider that a sort of "wildcard feature" as long as you were aware of it.

[paulclift]

Hey Davej,

 

Sorry, I don't quite get what you mean... wouldn't this lead to the same problems if I can't specify a 'group' of classes?

 

I have been trying for ages to get the 'for' to apply only to divs when a given class is declared, but it is beyond me...

[davej]

Well, I believe if you are careful with the naming of your classes you can probably avoid the problem Hadien is describing. Don't test for class 'xyz' and then be surprised when it false-triggers on class 'contentxyz042' because you were silly enough to embed 'xyz' inside it.

 

Testing, of course, will show whether there are any other issues that need to be handled.

[Hadien]

if you need to perform some other actions on child divs, other than simple CSS, try using an inside loop

divs = document.getElementsByTagName("div");for(i=0;i<divs.length;i++){   //check every div and see if it has "myclassname"   if(divs[i].hasClass("myclassname")){      var isfound = null;            //if the div also has "group1" it checks it's descendants for an id      if(divs[i].hasClass("group1"){         //first unconditionally set all children to none display         for(j=0;j<divs[i].children.length;j++)            divs[i].children[j].style.display = "none";         //then find all divs inside this current div         var innerDivs = divs[i].getElementsByTagName("div");         for(j=0;j<innerDivs.length;j++){            //see if the div with the specific id is in this innerDivs            if(innerDivs[j].id == "some-other-thing-which-should-remain-visible"){               isfound = innerDivs[j];               //found the special div, now walk with it back out to the outer divs,               // since its possible that this this div isn't a direct child,               // repairing any displays that were set to none                while(isfound.parentElement && isfound != divs[i]){                  isfound.style.display = undefined;                  isfound = isfound.parentElement               }                 break;            }         }      }      //if divs[i] didn't have the "group1" class OR if it did but didn't have the       // special inside div#some_other-thing-which-should-remain-visible      // then isfound will still be set to null      if(!isfound)         divs[i].style.display="none";   }}

[davej]

Well, that is pretty fancy to add a method like that. In post #7 above where does class come from?

[Hadien]

oh that was a typo, should have been 'classes', fixed

[justsomeguy]

You can also get all divs, hide them all, then get the divs with the class you're looking for and show those.