Изменить класс CSS на основе существования

Question

Во-первых, я должен подчеркнуть, что HTML-код предварительно сгенерирован и не может быть изменен - ​​в противном случае я бы не делал это таким образом:)

Так ....

Скрипт и HTML ниже создают красивое меню скрытия / показа, когда вы нажимаете навигационный заголовок, навигационный элемент становится видимым.

Однако я хочу, чтобы класс css для navheader изменялся в зависимости от того, находится ли 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')
});