更改CSS類基於存在

Question

首先，我要強調的是，HTML是預先生成的，無法改變 - 不然我也不會以這種方式做：）

所以....

下面的腳本和HTML創建一個漂亮的隱藏/顯示菜單，當你點擊navheader navitem變得可見時。

但是我希望navheader的css類根據navitem是否直接在它下面改變。

例如

navheader (Change Class to linksbelow) 
    navitem 
navheader (Change Class to NOlinksbelow) 
navheader (Change Class to NOlinksbelow) 
navheader (Change Class to linksbelow) 
    navitem 
etc.... 

我的HTML和jQuery：

<script> 
    $(function() { 
      $('.Nav table .navitem').hide(); 
       $('.Nav table.navheader').click(function() { 
        $(this).parent().parent().next().find(".navitem").slideToggle('100'); 
       }); 
      }); 
</script> 

<div class="Nav"> 

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td> 
      <table class="navheader"> 
       <tr> 
        <td> 
         <a class="navheader" href="#">Header Link 1</a> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table> 
       <tr> 
        <td> 
         <table class="navitem"> 
          <tr> 
           <td> 
            <a class="navitem" href="#">Link 1</a> 
           </td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table class="navheader"> 
       <tr> 
        <td> 
         <a class="navheader" href="#">Header link 2</a> 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

</div> 

Answer 1

好吧，這個特定的情況下，似乎沒有工作了僅使用CSS選擇器時（因爲沒有這樣的東西「以前的兄弟選擇」） ，所以它必須要更復雜一些：

$('.Nav tr:has(table.navheader)').each(function (i, elmnt) { 
    if($(elmnt).next().find('table.navitem').length > 0) 
     $(elmnt).find('table.navheader').addClass('linksbelow') 
});