Add class to parent LI where A = current document?

Question

I'm trying to append a class to an LI automatically if the filename matches the href (e.g; if the anchor has the href attribute set to about.php and the filename of the current page is about.php then it would append the class.) however, along the way I've hit some complications and I've been getting myself confused with the syntax a little...

So far I have this...

var filename = location.pathname.substring(1)

$(document).ready(function(){
    $('a').each(function() {
        if (this.href === filename) {
            $(this).parent('li').addClass('current_page_item');
        }
    });
});

My navigation is constructed as shown here and as you can see, it works and everything but only when the class is set manually... so I'm trying to get it to be automatic from the actual filename.

I hope this make some sense to someone, as I'm really confused on how to get this working now!

Thank-you to anyone who contributes, it's of great help and will help me understand the jquery syntax further, actually selecting something specific and writing a logical statement in jquery really confuses me as it's very different to PHP, which is what I'm used to.

My markup looks like this, since I didn't include it before and just assumed people would look at the source code to understand what I was meaning (though, I should have put it here)

<nav>
    <div class="container">
        <ul class="group" id="effects">
            <li><a href="index.php" title="View the latest news">News</a></li>
            <li><a href="about.php" title="Find out more about us">About</a></li>
            <li><a href="#" title="Find out about races">Races</a></li>
            <li><a href="#" title="Find out what tools we use">Tools</a></li>
            <li><a href="#" title="Read the Frequently Asked Questions">FAQ</a></li>
            <li><a href="contactus.php" title="Contact us">Contact Us</a></li>
        </ul>
    </div>
</nav>

Thanks.

Answer 1

I think you can do it as simple as this:

$(function(){
    $('a').filter(function() {
      return (this.href == location.href);
    }).parent('li').addClass('current_page_item');
});

​Filter the anchor tags by their href attribute. Seems to work on this JSFiddle. For some reason, you have to hit run for it to work.

Answer 2

Based on what little information you've provided in your question, I'd suggest (though this is untested):

var file = document.location.href.split('/').pop();
$('li a').filter(function(){
    return this.href.indexOf(file) !== -1;
}).parent().addClass('current_page_item');

This gets the contents of the current page's URL and splits it by the / character and then assigns the last element of the array to the variable file, for example:

'http://example.com/directory/page.html'

is converted into an array:

["http:", "", "example.com", "directory", "page.html"]

And the last element of that array is assigned to the variable, so file becomes equal to:

'page.html'

The jQuery iterates over every a element within an li element and then, if it finds the string page.html within the href attribute it returns that a element, and adds the class-name to its parent element.

You could, instead, use the full document.location.href, of course; which would give:

var page = document.location.href;
$('li a').filter(function(){
    return this.href == page;
}).parent().addClass('current_page_item');

This works much the same way, but instead of looking to see if the filename can be found within the URL, it checks that the href of the element is exactly equal to the current document.location.href.

References:

• JavaScript:
  • Array.pop().
  • String.indexOf().
  • String.split(). *jQuery:
  • filter().

Answer 3

I assume that li tag is parent of anchor tag than you can try this-

$(this).parent().addClass('current_page_item');

instead:

$(this).parent('li').addClass('current_page_item');