Question

Let’s say there are 6 th elements

    <thead>
      <tr><th></th><th></th><th></th> <th></th><th></th><th></th></tr>
    </thead>

and I want to iterate over the first 4 only. How do I get an iterable list of these elements so I can do something like this:

    while (i < myLimit) {
          th = thlist[i];
          // do something : if somecondition myLimit +=1;
          i++;
    }
    return i;

The th elements are decorated, some of them, with style=”display:none” and I’m trying to figure out how many such decorated th elements there are to the left of an arbitrarily chosen one.

NOTE: myLimit may have to be increased during the iteration!!

Answer 1

You can use getElementByTagName javascript pure function, like this:

function getStyle(elem, cssprop, cssprop2){
 // IE
 if (elem.currentStyle) {
   return elem.currentStyle[cssprop];

 // other browsers
 } else if (document.defaultView &&
                   document.defaultView.getComputedStyle) {
   return document.defaultView.getComputedStyle(elem,
null).getPropertyValue(cssprop2);

 // fallback
 } else {
   return null;
 }
}


var ths = document.getElementsByTagName('th');
var myLimit = 4;

var max = ths.length;

if (myLimit>max)
    myLimit = max;

for (var i = 0;i < myLimit; i++) {
    // do something with myarray[i]
    var th = ths[i];
    if (getStyle(th,'display','display')=='none')
        alert('th in position '+i+' is decorated with display:none');
}

here is a live example working http://jsfiddle.net/aJ8MS/