[jQuery] This is prob real simple to you, but this newbie can't figure it out

[jQuery] This is prob real simple to you, but this newbie can't figure it out


Hi guys,
I've got a problem that's been killing me, but I bet you guys can
solve it in no time.
I've got a nested list like so:
<ul id="mainnav">
<li><a href="/">Home</a>
    <ul>
        <li><a href="/weblog/">News &amp; Upates</a></li> <!-- link with
trailing slash -->
        <li><a href="/welcome">First time here?</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</li>
<li><a href="/about/">About</a> <!-- another link with trailing slash
-->
    <ul>
        <li><a href="/about/service-times">Service Times</a></li>
        <li><a href="/about/membership">Membership</a></li>
    </ul>
</li>
</ul>
I want to add a class of 'current' to the list elements that contain a
link to the current path in the URL. So here's my code:
$(document).ready(function(){
// set path to present URL
var path = location.pathname;
// add class .current to li elements that contain matching link to var
$('#mainnav a[@href$="' + path +
'"]').parents("li").addClass('current');
});
At the website root ('/'), I want only the first list item to get the
'current' class. Unfortunately what happens is that ALL list items
containing links with a trailing slash gets the 'current' class, i.e.
parent lis to /weblog/ and /about/ also get the 'current' class.
How do I prevent the parent lists elements of /weblog/ and /about/
from getting the 'current' class? Thanks
David