How to Jquery show only a particular td from this table structure?

Question

Hi Guys, i'm a total noob when it comes to Jquery and i've been trying to learn it but as of now i still don't know how to query this one out.

I have a table structure that looks like this:

<table class="wba_main_table" align="center" border="0" cellpadding="0" cellspacing="0" width="">
      <tbody>
        <tr>
          <td style="display: none;" id="wba_logo_bg">
          </td>
        </tr>
        <tr>
          <td style="display: none;" class="line">
          </td>
        </tr>
        <tr>
          <td class="wba_topnavBG">
          <table>
          <tr><td>bla bla bla</td></tr> 
          </table>
          </td>
        </tr>
        <tr>
          <td style="display: none;" class="line">
          </td>
        </tr>
        <tr style="display: none;" class="greyBar">
          <td>
          </td>
        </tr>
        <tr>
          <td style="display: none;" class="line">
          </td>
        </tr>
        <tr>
          <td style="display: none;" class="lightGreyBar">
          </td>
        </tr>
        <tr>
             <td><table><tbody><tr><td>
                 <div id="deep_div1"></div>
             </td></tr></tbody></table></td>
        </tr>
</table>

And what i wanted to do was to hide all the tr except for the one containing the wba_topnavBG. My strategy was to use the wba_logo_bg as id and select the parents then from there select all the children td which doesn't have the class wba_topnavBG and hide() them all. But i don't know how to write the selection part.

Any help? :) thanks!!

Edit

Forgot to add that inside that td there's another table structure with more tr and tds.

Edit 2

Mmm, it appears now that i have to hide another tr which contains a table which contains a div with an id. can the jquery line be modified to add another thing to look for in it's :has syntax?

1. How can i hide the other tr except for the one containing div deep_div1 and the one with td class wba_topnavBG?

as this new twist is still related to this question, i don't want to create another question in SO.

thanks again !!

Answer 1

You can combine the :not and :has pseudo-selectors:

$('.wba_main_table tr:not(:has(td.wba_topnavBG))').hide();

This selector will match all the tr elements that do not contain a td element with class wba_topnavBG.

Check an example with your markup here.

Edit: In response to your comment, if you have a table inside that td, and you only want to select the direct tr descendants of .wba_main_table, you should use the parent > child selector:

$('.wba_main_table > tr:not(:has(td.wba_topnavBG))').hide();