traversing div's of the same class

Question

Hi,

i have 5 div's of the same class but different id stacking on top of each other. how do I traverse them using javascript? they are named div1, div2, div3, etc...

also, how do i change each div's attribute while traversing?

thank you very much.

tam.

Answer 1

First of all read this article

getElementsByClassName Speed Comparison

and

Enhanced getElementsByClassName

var elements = document.getElementsByTagName("div");

for ( var i = 0; len = elements.length; i < len; i ++ )
{
    if ( elements[i].className === "yourclassname" )
    {
        // change the desired attribute of element.
        //Eg elements[i].style.display = "none";
    }
}

Using jQuery each function

$(".yourclassname").each ( function() {
    // $(this) will fetch the current element
});

Answer 2

for(var i = 1; i++; i<=5){
    var div = document.getElementById("div" + i);
    //do stuff with div
}

Edit: I see you call it "named" div1...div5, you must give id="div1" also for it to work

Answer 3

In modern browsers you can get them by using the getElementsByClassName function:

var elements = document.getElementsByClassName('myClass');

for (var i = 0, n = elements.length; i < n; i++) {
  //..
}

Notice that I'm getting the elements.length only once, that is a common practice when iterating HTMLCollections.

That's because those collections are "live", they can change at any time, and accessing the length property on each iteration it's expensive.

For complete cross-browser implementations, check this article by Mr. Resig:

• getElementsByClassName Speed Comparison

Edit: I leave you here a refactored version of the Dustin Diaz getElementsByClassName cross-browser pure DOM Implementation:

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

Answer 4

Are you using anything like Prototype or jQuery? If so, I highly recommend one of those, as they make traversal quite easy. For example, with Prototype it would be:

$$('.className').each(function(s) {
    //what you want to do
});

Answer 5

The library based answers are obvious, but if you're restricted from using them, here are a couple methods that are more compatible than using Firefox's (new and glorious!) document.getElementsByClassName.

Answer 6

Here's a jQuery solution:

Set attributes of all divs:

$(".yourclassname").attr("attribute","value");

Set text content of all divs:

$(".yourclassname").text("New content");

Set html content of all divs:

$(".yourclassname").html("<h1>New content</h1><p>blah blah blah</p>");

The jQuery library can be found at http://jquery.com/.

Answer 7

Its a bit of work to hack through, but here is an article on how to enable queryselectorAll even in old browsers:

http://ajaxian.com/archives/creating-a-queryselector-for-ie-that-runs-at-native-speed

To do this in Mootools or Prototype:

 $$('.className').each(function(element, index) {
   //what you want to do
 });

In Jquery it is the same sans the double dollar (as posted by others):

 $('.className').each(function() {
   //what you want to do
 });