Сравнение URL со ссылками

Question

У меня есть следующий HTML:

<ul class="vertical_menu no_select">
    <li class="edge_top">&nbsp;</li>
    <!-- Menu Items Here     -->
    <li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
    <li class="not_selected"><a class="selection_link" href="index.htm">Subitem 1</a></li>
    <li class="not_selected"><a class="selection_link" href="index.htm">Subitem 2</a></li>
    <!-- Menu Items End Here -->
    <li class="edge_bottom">&nbsp;</li>
</ul>

Теперь ссылки с классом "selection_link" нужно иметь li элемент (их родитель), чтобы иметь новый класс "selected" если текущий url соответствует href значение внутри тега привязки. Я могу получить полный URL-адрес, но я не знаю, как его использовать, чтобы лучше видеть, поскольку на разных уровнях каталогов может быть несколько страниц с одинаковыми именами.

Спасибо, если вы можете помочь! Я использую jQuery со всем этим, поэтому не стесняйтесь приводить мне примеры jQuery!

Answer 1

Проверьте jsFiddle. Это должно сделать трюк:

$("ul.vertical_menu li a").each(function() {

    if (this.href == window.location.href) {
        $(this).parent().toggleClass("not_selected selected");
    }

});

Answer 2

$('.selection_link').each(function() {
    if($(this).attr('href') === window.location.pathName.substring(1)) {
        $(this).parent().attr("class", "selected");
    }
});

не проверено, но это должно вас начать. подстрока объясняется тем, что pathname начинается с '/', вы можете просто поместить это в свой href

Answer 3

Или это...

$('.vertical_menu a').each(function() {
    if (location.href.search(this.attr('href')) != -1) {
        $(this).parent().addClass('selected');
    }
});