Question

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?

————–HTML code skeleton————-

<table cellspacing="0" cellpadding="0" bgcolor="#FFF" width="100%">
    <thead>
        ---table rows here---- 
    </thead>
    <tbody>
    <tr>
    <td>
<table cellspacing="0" border="0" width="100%" style="float:left">
    <thead>
      <tr style="text-align:left;">
        <td style="font-size:14px;font-weight:bold;text-align:left;padding:10px 5px">
                <span><label class="quarterly">Quarterly</label></span>
                <span style="padding:5px">|</span>
                <span><label class="monthly">Monthly</label></span>
                 <span style="padding:5px">|</span>
                <span><label class="daily">Daily</label></span>
        </td>
      </tr>
    </thead>
    <tbody>

     ---table rows here----     
      </tbody>
      </table>
      </td>
     </tr> 
     <tr>
    <td>
    <table cellspacing="0" border="0" width="100%" style="float:left" class="quarterly">
    ---table rows here---
    </table>
    </td>
    </tr>
    <tr>
    <td>
    <table cellspacing="0" border="0" width="100%" style="float:left" class="monthly">
    ---table rows here---
    </table>
    </td>
    </tr>
    <td>
    <table cellspacing="0" border="0" width="100%" style="float:left" class="daily">
    ---table rows here---
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </table>

———jQuery 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();
    });​

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.

Updated code(that works in IE7, thanks to SO):

$('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();
            });

Answer 1

this.className returns the actual class attribute which, in ie7’s case, because of the ie9.js file, contains more than one class.
This means that a selector like the one you use :

'table.' + this.className

will be translated into:

'table.yourClassName ie7_class82'

which is not a valid jquery (or css) selector.

I suggest you replace this.className with something like :

var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join('.');

which means that :

'table.' + classSelector 

will be translated into :

'table.yourClassName.ie7_class82.some-other-classes-if-any'