Question

I have this HTML piece of code and I want to display:none on the class ss_label of which it has value From:, To:, Departing: and Returning:. The last 3 that has an extra class of ss_label_adult, ss_label_child and ss_label_inf, I want them to be displayed correctly.

The HTML is retrieved from an API so I can’t change the way it is.

<table cellspacing='0' class='ss_sp_as'>
<tbody>
<tr class='ss_sp_sc_from'>
    <td class='ss_label'>
        From:
    </td>
    <tr class='ss_sp_sc_to'>
        <td class='ss_label'>
            To:
        </td>
        </table>
        <table cellspacing='0' class='ss_sp_dates'>
        <tbody>
        <tr class='ss_sp_sc_to'>
            <td class='ss_label'>
                Departing:&nbsp;
            </td>
            <tr class='ss_sp_sc_to'>
                <td class='ss_label'>
                    Returning:&nbsp;
                </td>
                </table>
                <table cellspacing='0' class='ss_sp_pass'>
                <tbody>
                <tr class='ss_sp_sc_to'>
                    <td class="ss_label ss_label_adult">
                        &nbsp;
                    </td>
                    <td class="ss_label ss_label_child">
                        &nbsp;
                    </td>
                    <td class="ss_label ss_label_inf">
                        &nbsp;
                    </td>
                    </table>

The only way I could think of doing this, is by display:none dynamically to the ones that haven’t got more classes? Does that makes sense?

Thanks alot

Answer 1

These elements that should be hidden have multiple class names, where the elements which have to be hidden have only one class name. So, this expression should work:

$(".ss_label").filter(function(){
     return $(this).attr("class") == "ss_label";
}).css("display","none");

1. All .ss_label elements are selected
2. All elements whose class attribute contains no more than ss_label are kept, the others are ignored.
3. The remaining elements are assigned a display property which value none.

Fiddle: http://jsfiddle.net/QGSsG/