title: IE7 issue with jQuery find?
body: <p>The following code worked fine in IE7 until I started using IE9.js file. The IE9.js file adds an additional class "ie7_class82" to the already present classes which I added. The code below stopped working in IE7. Is there a known issue with not able to find matching classes with jQuery when multiple classes are present?</p>
  
  <p>--------------HTML code skeleton-------------</p>
  
  <pre><code>&lt;table cellspacing="0" cellpadding="0" bgcolor="#FFF" width="100%"&gt;
      &lt;thead&gt;
          ---table rows here---- 
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
      &lt;td&gt;
  &lt;table cellspacing="0" border="0" width="100%" style="float:left"&gt;
      &lt;thead&gt;
        &lt;tr style="text-align:left;"&gt;
          &lt;td style="font-size:14px;font-weight:bold;text-align:left;padding:10px 5px"&gt;
                  &lt;span&gt;&lt;label class="quarterly"&gt;Quarterly&lt;/label&gt;&lt;/span&gt;
                  &lt;span style="padding:5px"&gt;|&lt;/span&gt;
                  &lt;span&gt;&lt;label class="monthly"&gt;Monthly&lt;/label&gt;&lt;/span&gt;
                   &lt;span style="padding:5px"&gt;|&lt;/span&gt;
                  &lt;span&gt;&lt;label class="daily"&gt;Daily&lt;/label&gt;&lt;/span&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
       ---table rows here----     
        &lt;/tbody&gt;
        &lt;/table&gt;
        &lt;/td&gt;
       &lt;/tr&gt; 
       &lt;tr&gt;
      &lt;td&gt;
      &lt;table cellspacing="0" border="0" width="100%" style="float:left" class="quarterly"&gt;
      ---table rows here---
      &lt;/table&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
      &lt;table cellspacing="0" border="0" width="100%" style="float:left" class="monthly"&gt;
      ---table rows here---
      &lt;/table&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;td&gt;
      &lt;table cellspacing="0" border="0" width="100%" style="float:left" class="daily"&gt;
      ---table rows here---
      &lt;/table&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>---------jQuery code--------------</p>
  
  <pre><code> $('table thead span label').click(function() {               
          $(this).parents('table').parents('table').find('table').hide();
          $(this).closest('table').find('tbody tr').hide();           
          $(this).closest('table').show();
          $(this).closest('table').find('tbody tr.' + this.className).show();
          $(this).parents('table').parents('table').find('table.' + this.className).show();
      });​
  </code></pre>
  
  <p>Note: Unfortunately no errors in IE7(and works fine in FF and Chrome). It is supposed to hide all the tables and show only the ones which match the class name that is present in the label tag. IE7 hides all the tables but fails to show the tables that match the class.</p>
  
  <p>Updated code(that works in IE7, thanks to SO):</p>
  
  <pre><code>$('table thead span label').click(function() {  
                          var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join(',');  
                          $('label:not('+classSelector+')').css('color','#00425f');       
                          $(this).css('color','#d6c9b9');                     
                          $(this).parents('table').parents('table').find('table').hide();                     
                          $(this).closest('table').find('tbody tr').hide();                       
                          $(this).closest('table').show();
                          $(this).closest('table').find('tbody tr.' + classSelector).show();
                          $(this).parents('table').parents('table').find('table.'+ classSelector).show();
              });
  </code></pre>