getElementsByClassName IE resolution issue

Question

I am having issues figuring out how to resolve the getElementsByClassName issue in IE. How would I best implement the robert nyman (can't post the link to it since my rep is only 1) resolution into my code? Or would a jquery resolution be better? my code is

function showDesc(name) {
var e = document.getElementById(name);
//Get a list of elements that have a class name of service selected
var list = document.getElementsByClassName("description show");

//Loop through those items
for (var i = 0; i < list.length; ++i) { 
    //Reset all class names to description
    list[i].className = "description";
}

if (e.className == "description"){
    //Set the css class for the clicked element
    e.className += " show";
}
else{
    if (e.className == "description show"){
        return;
    }
}}

and I am using it on this page dev.msmnet.com/services/practice-management to show/hide the description for each service (works in Chrome and FF). Any tips would be greatly appreciated.

Wagers

A jquery solution would indeed be way easier – Teets

use jQuery... or any other framework that takes care of the cross-browser stuff for you. Don't reinvent the wheel. – Intend

Answer 1

I was curious to see what a jQuery version of your function would look like, so I came up with this:

function showDesc(name) {
    var e = $("#" + name);
    $(".description.show").removeClass("show");
    if(e.attr("class") == "description") {
        e.addClass("show");
    } else if(e.hasClass("description") && e.hasClass("show")) {
        return;
    }
}

Mastigophoran

this works perfectly! and if i am correct this is more efficient than a lot more efficient than using getElementsByTagName("*") – Wagers

If you want efficient, forgo the show class altogether and use jQuery to show/hide. See my answer below. – Dative

Answer 2

This should support multiple classes.

function getElementsByClassName(findClass, parent) {

  parent = parent || document;
  var elements = parent.getElementsByTagName('*');
  var matching = [];

  for(var i = 0, elementsLength = elements.length; i < elementsLength; i++){

    if ((' ' + elements[i].className + ' ').indexOf(findClass) > -1) {
      matching.push(elements[i]);
    }

  }

  return matching;

}

You can pass in a parent too, to make its searching the DOM a bit faster.

If you want getElementsByClassName('a c') to match HTML <div class="a b c" /> then try changing it like so...

var elementClasses = elements[i].className.split(/\s+/),
    matchClasses = findClass.split(/\s+/), // Do this out of the loop :)
    found = 0;

for (var j = 0, elementClassesLength = elementClasses.length; j < elementClassesLength; j++) {

    if (matchClasses.indexOf(elementClasses[j]) > -1) {
        found++;
    }

}

if (found == matchClasses.length) {
   // Push onto matching array
}

If you want this function to only be available if it doesn't already exist, wrap its definition with

if (typeof document.getElementsByClassName != 'function') { }

Nubilous

Answer 3

Even easier jQuery solution:

$('.service').click( function() {
    var id = "#" + $(this).attr('id') + 'rt';
    $('.description').not(id).hide();
    $( id ).show();
}

Why bother with a show class if you are using jQuery?

Dative

Answer 4

I used to implement HTMLElement.getElementByClassName(), but at least Firefox and Chrome, only find the half of the elements when those elements are a lot, instead I use something like (actually it is a larger function):

getElmByClass(clm, parent){
   // clm:  Array of classes
   if(typeof clm == "string"){ clm = [clm] }
   var i, m = [], bcl, re, rm;
   if (document.evaluate) {    // Non MSIE browsers
      v = "";
      for(i=0; i < clm.length; i++){
         v += "[contains(concat(' ', @"+clc+", ' '), ' " + base[i] + " ')]";
      }
      c = document.evaluate("./"+"/"+"*" + v, parent, null, 5, null);
      while ((node = c.iterateNext())) {
          m.push(node);
      }
   }else{                  // MSIE which doesn't understand XPATH
      v = elm.getElementsByTagName('*');
      bcl = "";
      for(i=0; i < clm.length; i++){
          bcl += (i)? "|":"";
          bcl += "\\b"+clm[i]+"\\b";
      }
      re = new RegExp(bcl, "gi");
      for(i = 0; i < v.length; i++){
         if(v.className){
             rm = v[i].className.match(bcl);
             if(rm && rm.length){      // sometimes .match returns an empty array so you cannot use just 'if(rm)'
                 m.push(v[i])
             }
         }
      }
    }
    return m;
}

I think there would be a faster way to iterate without XPATH, because RegExp are slow (perhaps a function with .indexOf, it shuld be tested), but it is working well

Watusi

Answer 5

Heres one I put together, reliable and possibly the fastest. Should work in any situation.

function $class(className) {
    var children = document.getElementsByTagName('*') || document.all;
    var i = children.length, e = [];
    while (i--) {
        var classNames = children[i].className.split(' ');
        var j = classNames.length;
        while (j--) {
            if (classNames[j] == className) {
                e.push(children[i]);
                break;
            }
        }
    }
    return e;
}

Brietta

Answer 6

You can replace getElementsByClassName() with the following:

function getbyclass(n){
  var elements = document.getElementsByTagName("*");
  var result = [];
  for(z=0;z<elements.length;z++){
    if(elements[z].getAttribute("class") == n){
      result.push(elements[z]);
    }
  }
  return result;
}

Then you can use it like this:

getbyclass("description") // Instead of document.getElementsByClassName("description")

Osithe

You also need to handle class attributes containing multiple class strings. – Swear

this looks like it would be terribly inefficient if the document has more than a few elements, or you call the function more than a few times. – Intend

True, but if you just wrote getbyclass("one two") it should retrieve the ones with one and two. If the OP needs, I can add some code for it to work 100% tho – Osithe

you could alternatively use this robertnyman.com/2008/05/27/… – Osithe

@Osithe ya I found that before but wasnt sure how to implement it into my code. thanks for your input im going to try it out now. – Wagers

btw I just tested it on a page with 1000 elements. It worked 100% OK, and took less than half a second. – Osithe