如何使用 jQuery 添加基于 URL 的“选定”类？

我的 wikispace 主题中有一个侧边栏链接列表，当前使用 jQuery 根据 .com/ 之后的 URL 将类应用到每个侧边栏链接。您可以在下面的代码中看到这一点的应用......

<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>

我不想通过基于 URL 的 jQuery 应用唯一的类，而是希望它向链接添加一个“selected”类，该类将通过 URL 进行检测。例如，如果用户转到“地理”页面，jQuery 将检测当前是否正在查看该 URL，如果是，则会将“selected”类应用于侧边栏链接。所以，它看起来像这样......

<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>

在我上面提供的第一个代码示例中，您可以看到其中有无序列表，只有链接。我还想知道如何将所有这些链接包装在无序列表中，每个链接都包含在列表项中，就像第二个代码示例中一样。这相对容易做到吗？

我当前的侧边栏 jQuery 代码如下...

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);
});

感谢您对此的帮助！

这是现在产生评论中提到的冲突的代码......

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>");
});

在线演示：http://jsbin.com/otapo

将测试 URL 粘贴到该演示页面上的文本框中，以查看它选择相应的链接。将文本框值更改为新的 test-url 以查看它取消选择任何选定的链接，然后选择与提供的 url 相对应的新链接。

根据 URL 添加“选定”类

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

这里的这个特殊例子需要一些解释。通常我会改变这个逻辑，并寻找兄弟姐妹，但考虑到您有兴趣将每个链接包装在 LI 中，这些链接将不再是兄弟姐妹。

我可以写这个来与每个链接周围的父 LI 一起工作，但是我不确定您是否会立即使用父 LI 对其进行测试，并认为它不起作用。话虽这么说，如果您实施以下解决方案，则可以改进该解决方案。在目前的状态下（不是很漂亮），它会以任何一种方式工作。

将链接转换为 UL

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