title: jQuery .each function across browsers (works in ff, ie8, not ie7)
body: <p>I've been messing with this for far too long, and managed to get IE8 working, but IE7 has me stumped.</p>
  
  <p>I've got a table, and for each column, I am trying to extract a number of divs. I am only extracting divs which match specific selectors, not all divs in the column.
  My original jquery selector was</p>
  
  <pre>
  jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
  alert(jQuery(this).attr('id'));
  });
  </pre>
  
  <p>This worked great in FF, but didn't trigger the .each function at all in IE. </p>
  
  <p>After messing around for a bit, I got to </p>
  
  <pre>
  jQuery('td:nth-child('+columnNum+') > div.a1, td:nth-child('+columnNum+') > div.a3, td:nth-child('+columnNum+') > div.a4,td:nth-child('+columnNum+') >  div.a7', table#a+'tableId).each(function(){
  alert(jQuery(this.attr('id'));
  });
  </pre>
  
  <p>Not so nice, but works in IE8. 
  I had tried all sorts of combinations using .eq(+'columnNum+') but nothing else was working. </p>
  
  <p>Now I go and test in IE7, and again the .each isn't being triggered. </p>
  
  <p>What is the nicest way (and cross-browser compatible) to work with this sort of .each element?</p>
  
  <p>--------------addition--------------</p>
  
  <p>After further testing and playing around with suggestions from DrJ and bdukes, I've found that the table#'+tableId breaks the function in both IE7&amp;8. </p>
  
  <p>I've gone back to my original code </p>
  
  <pre>jQuery('div.a1, div.a3, div.a4, div.a7','table#a'+tableId+' td:nth-child('+columnNum+')').each(function(){
  alert(jQuery(this).attr('id'));
  });
  </pre>
  
  <p>as that seems to me the most efficient. 
  If I remove 'table#a'+tableId, i get the correct response in all browsers, except that it is adding up the results from all tables, and I need to be able to get only the results from one table at a time. 
  I have also tried 'table#a'+tableId+'>td:nth-child('+columnNum+')').each, but that doesn't work either. </p>
  
  <p>The first function i've used works perfectly in firefox. </p>
  
  <p>----------------the html being selected---------------------------
  The tables are being created dynamically in javascript so I can't really copy and past it, but here is what the output looks like. It ends up looking kinda like a gantt chart on a table. </p>
  
  <pre>
  &lt;table id="a1"&gt;
   &lt;tr&gt;
    &lt;th colspan="5"&gt;
          Group Name
     &lt;/th&gt;
     &lt;/tr&gt;
    &lt;tr class="rowId1" &gt;
    &lt;td&gt;
     &lt;div class="a1" id="a43" style="margin-left:13px; width:60px" &gt;&lt;/div&gt;
     &lt;/td&gt;
    &lt;td&gt;
    &lt;/td&gt;
     &lt;td&gt;
      &lt;div class="a3" id="a93" style="margin-left:4px; width: 80px" &gt;&lt;/div&gt;
     &lt;div class="a2" id="a94" style="margin-left:4px; width: 30px" &gt;&lt;/div&gt;
    &lt;/td&gt;
   &lt;td&gt;
      &lt;div class="a1" id="a24" style="margin-left: 15px; width: 65px;" &gt;&lt;/div&gt;
    &lt;/td&gt;
   &lt;td&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;/tr&gt;
    &lt;tr class="rowId1" &gt;
    &lt;td&gt;
     &lt;div class="a7" id="a24" style="margin-left:10px; width:60px" &gt;&lt;/div&gt;
     &lt;/td&gt;
    &lt;td&gt;
   &lt;div class="a2" id="a15" style="margin-left:14px; width: 22px" &gt;&lt;/div&gt
    &lt;/td&gt;
     &lt;td&gt;
     ;
     &lt;div class="a2" id="a105" style="margin-left: 8px; width: 50px" &gt;&lt;/div&gt;
    &lt;/td&gt;
   &lt;td&gt;
    &lt;/td&gt;
   &lt;td&gt;
  &lt;div class="a4" id="a102" style="margin-left: 5px; width: 45px;" &gt;&lt;/div&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
    &lt;/table&gt;
  </pre>