jQuery: going through all visible rows of a table...

Question

Hi,

I need to write some code that would loop though all rows of a table, then check a hidden input in each row to see if it contains a certain value and if so, set some values and hide the row. It might be clumsy, but it worked: (variable "zeile" contains the first row, is initialized correctly before the loop):

while (goon) {
  var hf = zeile.attr('id');
  if (hf) {
      hf = document.getElementById(hf.substr(0,hf.length-2) + 'hfMat');
      if (hf.value == mid) {
          found=true;
          goon=false;
          zeile.hide();
     } else {
         cnt +=1 ;
         if (cnt<10) {
               alert('not found, cnt=' + cnt);
            } else {
               goon=false;
         }
       }
     }

     if (goon) {
        zeile = zeile.next('tr');
        goon=zeile.length>0;
     }
}

Ok, first of all, line 4 with the document.getElementById(hf...) looks like admitting defeat and it probably is - but $("#"+hf).val() just wouldn't do it, returned undefined :(

As I said, this code works fine. BUT then I had a case where two rows contained the same value in the hfMat-field, and my script would then hide the first row again, whereas it should have continued to the second. "Easy", I thought, and improved the statement to determine the next row to process (4th line from the end), so I changed from zeile = zeile.next('tr'); to zeile = zeile.next('tr:visible'); However, with jQuery 1.3.2, this doesn't work and I get undefined. What am I doing wrong?

And surely, there must be a much better way to get this selection done without such messy looping, by simply using some of jQuery's more advanced mechanisms, but I'm afraid these are beyond me atm. But I'd be happy to see some ideas ;)

Answer 1

When you simply hide an element, it is not taken out of the document flow. Therefore, it will continue to get located by your DOM queries.

Without seeing your actual HTML, I can only speculate that what you're trying to accomplish can be done in a simpler way with the following jQuery loop:

$("tr input[value=" + mid + "]").each(function () {
    this.hide();
});