How Can I Add a "Selected" Class Based on URL with jQuery?

Question

I have a sidebar list of links in my wikispace theme that currently uses jQuery to apply a class to each of the sidebar links based on the URL after the .com/. You can see this being applied in the code below...

<div class="WikiCustomNav WikiElement wiki"><a href="/" class="">Home</a>
<a href="/Calendar" class="calendar">Calendar</a>
<a href="/Science" class="science">Science</a>
<a href="/Language+Arts" class="language-arts">Language Arts</a>
<a href="/Video+Page" class="video-page">Video Page</a>
<a href="/Code+Page" class="code-page">Code Page</a>
<a href="/Geography" class="geography">Geography</a>
<a href="/Western+Day" class="western-day">Delicious Bookmarks</a>
<a href="/Field+Day" class="field-day">Field Day</a>
<a href="/Share+Posts" class="share-posts">Share Posts</a>
<a href="/Audio+Page" class="audio-page">Audio Page</a>
<a href="/Map+Page" class="map-page">Map Page</a>
<a href="/Staff+Olympics" class="staff-olympics">Staff Olympics</a>
<a href="/Scribd+Document" class="scribd-document">Scribd Document</a>
<a href="/Staff+Meetings" class="staff-meetings">Staff Meetings</a>
<a href="/Staff+Phone+Tree" class="staff-phone">Staff Phone Tree</a>
<a href="/Employee+Procedures" class="employee-procedures">Employee Procedures</a>
<a href="/Student+Handbook" class="student-handbook">Student Handbook</a>
<a href="/Table+Sorter" class="table-sorter">Table Sorter</a>
<a href="/Teachers+Tips" class="teachers-tips">Teachers Tips</a>

Instead of applying a unique class via jQuery based on the URL, I would like to have it add a class of "selected" to the link, which would be detected via the URL. For example, if the user goes to the Geography page, the jQuery would detect whether that URL was currently being viewed, and if so, it would apply the "selected" class to the sidebar link. So, it would look like this...

<ul>
<li><a href="/Geography" class="selected">Geography</a></li>
<li><a href="/Map+Page">Map Page</a></li>
<li><a href="/Staff+Olympics">Staff Olympics</a></li>
<li><a href="/Scribd+Document">Scribd Document</a></li>
<li><a href="/Staff+Meetings">Staff Meetings</a></li>
<li><a href="/Staff+Phone+Tree">Staff Phone Tree</a></li>
<li><a href="/Employee+Procedures">Employee Procedures</a></li>
<li><a href="/Student+Handbook">Student Handbook</a></li>
<li><a href="/Table+Sorter">Table Sorter</a></li>
<li><a href="/Teachers+Tips">Teachers Tips</a></li>
</ul>

In the first code sample I provided above, you can see that there is unordered list in there, only links. I would also like to know how I could wrap all of those links in an unordered list, with each link included within a list item, like in the second code example. Is that relatively easy to do?

The current jQuery code I have for the sidebar is here below...

jQuery("#sidebar br").remove();
jQuery(".wiki_link, .wiki_link_new").attr('class','').each(function(){
    var className = jQuery(this).attr('href').substr(1).toLowerCase().split('+').slice(0,2).join('-');
    jQuery(this).addClass(className);
});

Thanks for your help on this!

Here's the code that is now producing a conflict mentioned within the comments...

jQuery("#sidebar br").remove();
jQuery(".wiki_link, .wiki_link_new").attr("class", "").each(function () {
    var a = jQuery(this).attr("href").substr(1).toLowerCase().split("+").slice(0, 2).join("-");
    jQuery(this).addClass(a)
});

var $ul = $("<ul></ul>").insertAfter($("div#toc > h1"));
$("a[href^=#toc]").each(function () {
    var b = $("<li></li>"),
        a = $(this).parent();
    b.append(this);
    a.remove();
    $ul.append(b)
});

var loc = window.location.split("/").slice(-1);
jQuery("a.selected").removeClass("selected");
jQuery("a[href$='" + loc + "']").addClass("selected");
jQuery(".WikiCustomNav").wrapInner("<ul></ul>").find("a").wrap("<li></li>");
});

Answer 1

Online demo: http://jsbin.com/otapo

Paste a test-url into the textbox on that demo page to see it select the corresponding link. Change the textbox value to a new test-url to see it deselect any selected links, and select the new link that corresponds to the url provided.

Adding Class 'Selected' Based on URL

var loc = window.location.split("/").slice(-1);
$("a.selected").removeClass("selected");
$("a[href$='"+loc+"']").addClass("selected");

This particular example here requires some explaining. Normally I would change this logic, and look for siblings, but considering the fact that you're interested in wrapping each link in an LI, these links wouldn't be siblings anymore.

I could write this to work with parent LI's around each link, but then I'm not sure if you would test it immediately with parent LI's, and think that it doesn't work. That being said, if you implement the following solution, you could improve this solution. In its current state (not very pretty), it will work either way.

Convert the Links into an UL

$(".WikiCustomNav").wrapInner("<ul></ul>").find("a").wrap("<li></li>");