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

Question

我在我的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检测到. 例如,如果用户转到Geography页面,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>");
});

Answer 1

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

将test-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>");

Answer 2

想看一些深度的jQuery魔术？这会将你的div转换成一个列表(jQuery 1.4+)并进行类修改:

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

好的,这是如何工作的？它:

• 选择div.wiki;
• 将它包裹起来<ul>;
• 选择孩子<div>(现在wrap()返回<div> still *not* the);</li> <li>Unwraps them, meaning the <code>&lt;div&gt; is deleted and the links are children to the</code><ul>;
• 包裹每个链接<li>;
• 从链接中删除所有类;
• 过滤到具有等于窗口位置的相对路径的href的链接; 和
• 将selected类添加到该链接.

编辑:这是一个完整的工作示例,我在本地运行http://localhost/test.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<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>

输出:

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

如果你想找出你运行的jQuery版本:

alert($().jquery);

编辑: jQuery 1.3版本:

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