JQuery навигации выделить

Question

Привет. Я пытаюсь написать скрипт в Jquery, который автоматически выбирает ссылку на текущую страницу в главном меню. Nav - это простой UL, подобный следующему:

<ul id="primaryNav">
    <li>
        <a href="retail.html">Home</a>
    </li>
    <li>
        <a href="vision.html">Our Vision</a>
    </li>
    <li>
        <a href="context.html">Town in context</a>
    </li>
</ul>

Мой Jquery до сих пор выглядит так:

$('#primaryNav').find("a[href='"+window.location.href+"']").each(function(){
    $(this).addClass("selected");
}); 

Это не работает, потому что я думаю, что он выбирает весь URL, тогда как мне просто нужно выбрать последнюю часть, например, retail.html или vision.html, затем добавить класс .selected

Может кто-нибудь помочь, пожалуйста? Заранее спасибо.

Answer 1

Используйте атрибут , заканчивающийся селектором , чтобы быть здесь безопасным ($= вместо =), например:

$('#primaryNav').find("a[href$='"+window.location.href.split('/').pop()+"']")
                .addClass("selected");

Также нет необходимости в .each() здесь, просто вызов .addClass() добавит его ко всем соответствующим элементам (даже если для вашего примера должен быть один).

Answer 2

Вот так (исходя из названия страницы):

$('#primaryNav').find("a[href$='" + window.location.href.split("/").reverse()[0] + "']").addClass("selected");

Answer 3

А как насчет простой подстроки?

var href = window.location.href;
var htmlPageName = href.substring(href.lastIndexOf('/') + 1);

$('#primaryNav').find("a[href='" + htmlPageName +"']").each(function(){
    $(this).addClass("selected");
});