Как я могу добавить «выбранный» класс на основе URL с jQuery?

Question

У меня есть список ссылок на боковой панели в моей теме вики-пространства, который в настоящее время использует jQuery для применения класса к каждой из ссылок на боковой панели на основе URL-адреса после .com /. Вы можете увидеть, как это применяется в приведенном ниже коде ...

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

Вместо применения уникального класса через jQuery на основе URL-адреса, я бы хотел, чтобы он добавил класс "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>");
});

Answer 1

Хотите увидеть глубокую магию 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
• Переносит каждую ссылку в <li>;
• Удаляет все классы из ссылок;
• Фильтрация вниз по ссылке (ссылкам), у которых есть href, равный относительному пути расположения окна; и
• Добавляет класс selected к этой ссылке.

Редактировать: Вот полностью рабочий пример, который я запускал локально под http://localhost/test.html:

<code><!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">

Выход:

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

Answer 2

Онлайн демо: http://jsbin.com/otapo

Вставьте тестовый URL-адрес в текстовое поле на этой демонстрационной странице, чтобы увидеть его, выберите соответствующую ссылку. Измените значение текстового поля на новый 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 3

Похоже, вам нужно сделать что-то вроде этого:

$(".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");  

Если все ссылки имеют одинаковые два класса (wiki_link и wiki_link_new), вы можете удалить их оба одновременно, выполнив removeClass("wiki_link wiki_link_new").