How to Set the Parent Class of an Unordered List

Question

Hi,

I have the following ul setup:

        <div id="sidebar">
        <ul id="themenu" class="sf-menu sf-vertical">

            <li>
                <a class="sf-with-ul topm" href="#">Musical Instruments</a>
                <ul class="bullet">
                    <li><a href="#">Guitars</a></li>
                    <li><a href="#">Drums</a></li>
                    <li><a href="#">Keyboards</a></li>
                    <li><a href="#">Brass</a></li>
                </ul>
            </li>
        </ul>
        </div>

My question is, in addition to the above, I have other top-level menus with sub-menus that when a top-level menu is selected, it is highlighted "Green" based on a class I have created called "currentMenu".

My jQuery works fine for top-level menu items for setting them to "Green" as each top-level menu is toggled but what I am unsure how to do, is that when the user selects say the sub-menu "Drums" in the above code, I want it's parent top-level menu set to "currentMenu" class. In this case, the top-level button "Musical Instruments" would be set.

I am unsure how to do. I tried something like:

    $('ul.sf-menu li a').click(function() {

        if($(this).hasClass('nosub')) {
            $("ul.sf-menu li ul li a").removeClass("currentSubMenu");
        }
        else {
            $("ul.sf-menu li a").not(this).removeClass("currentMenu");
            $("ul.bullet li a").parent().this.addClass("currentMenu");
        }
    });     

It's this line I'm not sure about:

$("ul.bullet li a").parent().this.addClass("currentMenu");

Any help would be great.

Thanks.

Answer 1

I'm still not 100% sure from the question, but I think this is what you're after. Instead of this:

$("ul.bullet li a").parent().this.addClass("currentMenu");

You can use .closest() to get there, like this:

$(this).closest('.sf-menu > li').children('a').addClass('currentMenu');

This goes from the link you clicked on up to the first level <li> it's in, and applies the .currentMenu class to it's <a> child.

---

Or, if you want .currentClass applied at each level you're in, you can do this:

$(this).parents('li').children('a').addClass('currentMenu')
       .end().siblings().children('a').removeClass("currentMenu");

You can give it a try here.