Change CSS class based on existence

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>

JorenB · Accepted Answer · 2009-08-24 18:52:04Z

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')
});

edited Aug 24, 2009 at 18:52

answered Aug 24, 2009 at 16:48

JorenB

1,8312 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CLiown Over a year ago

Its complicated but it works, however it applies the class to the TR not the navheader. Any pointers?

JorenB Over a year ago

Oh yeah, 'scuse me, forgot about that... give me a minute, I'll try to work it out.

epascarello Over a year ago

I think you could just do $(...).parent().addClass('link...');

Collectives™ on Stack Overflow

Change CSS class based on existence

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related