Development getElementsByClass - Javascript DOM question

let's say I have 50 <div> tags, with the same class ("stuff") and unique ID's.

Now let's say I have 50 links each that calls a javascript function showthis("fortytwo");

so here's some psuedocode:

showthis(id){
document.getElementsByClass("stuff").style.display="none";
document.getElementByID(id).style.display="block";
}

the only problem is there is no getElementsByClass, so it looks like I'm going to have to either manage an array with all of the ID's walk through each one to show or hide it, or I'm going to have to walk through all of the DOM nodes and if the class of the node is "stuff" then hide it, otherwise you just wasted your time.

Can't I just say hide everything with a certain class then show something with a certain ID within that class?

(yes, this is for javascript/DOM/CSS page tabs, and yes, I need to have the ability to add and remove these tabs and hide and show tabs quickly and easily)

any ideas? I'd rather stay away from loops and managing an array if possible.

 

To do what you want you would have to write a loop.

Have you considered putting all (or just a number of ) your elements into a specific div and hiding displaying that? There would be less to loop around then.

 

Not that I know of mate. Either a) use the array like you said, or b) wrap all your show/hide divs in another div (divParent), and do:

Code:

function showThis(id) {
	var divParent = document.getElementById('divParent');
	var arrDivs = divParent.getElementsByTagName('div');

	for (i in arrDivs) {
		if (arrDivs[i].className=='stuff') {
			arrDivs[i].style.display='none';
		} // end if
	} // end for

	document.getElementById(id).style.display="block";
} // end function

Maybe?

 

Yeah, that's what I was planning on doing for the loop. I was just really hoping to be able to change all of it at once.

Man, that would be cool, don't you think? To perform a selected action to every element with a certain class? I guess then again the script engine would still have to perform a loop in the background, huh?

Cool, I'll try that though, I'll let you know what happens. If it does, this page I'm making is going to be SUPER cool, not just really cool, and not just super cool, but SUPER cool!

(It is going to be my online replacement for dreamweaver, since I'm too cheap to buy a copy for home.)

 

An *ultra cool* way would be to take an OO pespective.

Create a JS object and add each div you want to action to that object as a reference. When you wan to work on all the classes - just call a specific method and the collection of tags is ready.

Still involves looping though - but its under your direct control and outside the general document's remit - nice bit of encapsulated behaviour...!

a little over engineered maybe

 

Amusingly, I need to do the same thing now.

 

and teh definitive Hwulex answer is ....