如何使用jQuery将.current类添加到父级li

Question

I was wondering if someone can help me. I trying to add .current class to the active parent in my navigation.

Here is my navigation:

<ul id="top-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
    <ul id="about-dropdown" class="dropdown">
        <li><a href="#">Sub Cat</a></li>
        <li><a href="#">Sub Cat 1</a></li>
        <li><a href="#">Sub Cat 2</a></li>
    </ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

I have managed to get the .current class to display on the current page but when the user is on a sub page, eg. "Sub Cat 1" I want the "About" a tag to add the .current page.

Here is my Jquery:

 var url = window.location.pathname, 
 urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
    // now grab every link from the navigation
    $('#top-nav a').each(function(){
        // and test its normalized href against the url pathname regexp
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $(this).addClass('current');
        }

        $(document).ready(function(){
$("li.current").parent().addClass("current");
});

                $(document).ready(function(){
$("ul.current").parent().addClass("current-parent");
});

If anyone can help it would be appreciated :-)

Thanks

Answer 1

I think what you want is the parents() function:

$(document).ready(function(){
    $("li.current").parents('#top-nav > li').addClass("current");
});

If you only want the top level item use the selector above. If you want all parents use '#top-nav li'

Answer 2

<ul id="top-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
    <ul id="about-dropdown" class="dropdown">
        <li><a href="#">Sub Cat</a></li>
        <li><a href="#">Sub Cat 1</a></li>
        <li><a href="#">Sub Cat 2</a></li>
    </ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

JavaScript

$('#top-nav li a').hover(function(){
    $(this).addClass('current');
}).mouseleave(function(){
    $(this).removeClass('current');
});
$('#about-dropdown').hover(function(){
    $(this).prev().addClass('current');
}).mouseleave(function(){
    $(this).prev().removeClass('current');
});

CSS

.current{
    background: #F00;
}

Fiddle

http://jsfiddle.net/7LzLk8aw/