Question

Firstly I must emphasis that the HTML is pre-generated and cannot be altered – Otherwise I would not be doing it in this way : )

So….

The script and HTML below creates a nice hide/show menu, when you click the navheader the navitem becomes visible.

However I want the css class of the navheader to change based on if navitem is directly below it.

e.g.

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

My HTML and 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

Ok, this specific case doesn’t seem to work out when using only CSS selectors (as there’s no such thing as a ‘previous sibling selector’), so it’ll have to be a little more complex:

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