ansaurus

Question

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

Answer 1

+3 A:

Want to see some deep jQuery magic? This will convert your div into a list (jQuery 1.4+) and do the class mangling:

$("div.wiki").wrap("<ul>").children("a").unwrap().wrap("<li>").removeAttr("class")
  .filter("[href='" + ocation.pathname + "']").addClass("selected");

Ok, how does this work? It:

Selects div.wiki;
Wraps it in a <ul>;
Selects the children of the <div> (wrap() returns the <div> still *not* the);</li> <li>Unwraps them, meaning the <code><div> is deleted and the links are children to the</code><ul> now;
Wraps each link in a <li>;
Removes all classes from the links;
Filters down to the link(s) that have a href equalling the relative path of the window location; and
Adds the selected class to that link.

Edit: Here is a fully working example that I ran locally under http://localhost/test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function() {
  $("div.wiki").wrap("<ul>").children("a").unwrap().wrap("<li>").removeAttr("class")
    .filter("[href='" + location.pathname + "']").addClass("selected");
  $("#dump").text($("#content").html());
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="content">
<div class="wiki">
<a href="/one" class="wiki_link">one</a>
<a href="/test.html" class="wiki_link">two</a>
<a href="/three" class="wiki_link wiki_link_new">three</a>
</div>
</div>
<pre id="dump">
</pre>
</body>
</html>

Output:

<ul>
<li><a href="/one">one</a></li>
<li><a class="selected" href="/test.php">two</a></li>
<li><a href="/three">three</a></li>
</ul>

If you want to find out what version of jQuery you have run:

alert($().jquery);

Edit: jQuery 1.3 version:

var wiki = $("div.wiki");
wiki.children("a").wrapAll("<ul>").wrap("<li>").removeAttr("class")
  .filter("[href='" + location.pathname + "']").addClass("selected")
  .end().parent().parent().insertAfter(wiki);
wiki.remove();

cletus 2010-02-01 01:51:06

This code did not do the trick. It did not remove any of the wiki_link or wiki_link_new classes, and it did not add the "selected" class to the link corresponding to currently viewed page. It also wrapped the current div with 2 unordered lists, without wrapping any of the links with <li>'s. It also did not remove the div.

Spencer B. 2010-02-01 02:02:21

I think it may be because wikispaces loads jQuery, but it may not be the most current version (1.4). Would you know how to do it with a previous version of jQuery?

Spencer B. 2010-02-01 02:09:01

@Spencer: I had a typo (pathName instead of pathname). Otherwise it works (try the example). Not sure what version of jQuery Wikispaces runs.

cletus 2010-02-01 02:21:50

If Wikispaces does use a previous version of jQuery, will your solution still work? **UPDATE** I just checked the version they use, and it's 1.3.2. So, I guess your solution isn't working for that reason.

Spencer B. 2010-02-01 02:27:30

@Spencer: unwrap() I believe is jQuery 1.4. An alternate solution can be found but first find out what version they're using (using the above snippet).

cletus 2010-02-01 02:31:19

I just checked the version they use, and it's 1.3.2. So, I guess your solution isn't working for that reason.

Spencer B. 2010-02-01 02:33:36

@Spencer: 1.3 version added.

cletus 2010-02-01 02:54:54

WOW!! Thank you so much! Works great now!

Spencer B. 2010-02-01 03:02:56

Answer 2

A:

Sounds like you need to do something like this:

$(".wiki_link").removeClass("wiki_link");   // remove the css class
$(".wiki_link_new").removeClass("wiki_link_new");

// adds the selected class to the link who's href attribute contains 
// the current relative path.  Probably needs tweaking based on querystrings
// and whatnot.
$(".wiki_link[href~=" + window.location.pathname +"]").addClass("selected");

If all the links have the same two classes (wiki_link and wiki_link_new) you can remove them both at once by doing removeClass("wiki_link wiki_link_new").

womp 2010-02-01 01:55:51

This did the trick in removing the wiki_link class, but still leaves the wiki_link_new class. It also applied the "selected" class to the currently viewed page corresponding to the link. So that worked good... would you know how to remove the div that wraps the links, and replace it with an unordered list, which would also wrap the link with <li>'s? Thanks for your help.

Spencer B. 2010-02-01 02:07:09

ansaurus

tags:

views:

answers:

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

related questions