Разбор текущего URL рекурсивно в навигации по jQuery

Question

У меня есть набор вложенных неупорядоченных списков, представляющих навигацию по страницам. Список выглядит так:

<ul class="nav">
       <li><a href="/about/">About</a></li>
       <li><a href="/Programs/">Programs</a>
       <ul>
           <li><a href="/Programs/certificateprograms/">Certificate Programs</a></li>
        </ul>
    <li><a href="/Documents/">Documents</a></li>
    <li><a href="/Video/">Video</a></li>
</ul>

Я использую jQuery для сопоставления текущего URL-адреса с URL-адресом тега привязки в каждом элементе списка, чтобы установить выбранный класс в элементе списка:

var $currentURL = window.location.pathname;
//ensure file extension
if($currentURL.indexOf(".aspx") > -1) {
    var $url = $currentURL;
}
else
{
    var $url = $currentURL.substring(0,$currentURL.lastIndexOf("/")) + "/index.aspx";
}

$('.nav').find('a').filter(function(){
    var href = $(this).attr('href');
    return href!='/' && href!='#' && href.indexOf($url)==0;
    }).parent().addClass('selected');

Это прекрасно работает, если есть точное совпадение, но иногда текущая страница находится глубже в дереве и даже не отображается в левой навигационной панели. В этих случаях мы хотим пройтись по дереву с текущего URL и установить выбранный класс на первое найденное совпадение. Поэтому, если они находятся в /Programs/certificateprograms/level3/level4.aspx, мы хотим установить выбранный класс в элементе списка, содержащем "/Programs/certificateprograms/".

.

Я ищу лучший способ сделать это в jQuery. Похоже, я должен иметь возможность рекурсивно вызывать функцию, передавая текущий URL и обрезая до последнего индекса "/" каждый раз. У кого-нибудь есть идеи, как этого добиться?

Answer 1

Если я правильно понимаю, когда текущая страница глубже, чем любой из доступных элементов навигации, текущий URL все еще имеет тот же начальный шаблон. Таким образом, вам не нужно рекурсии. Вам просто нужно, чтобы текущий URL начинался с элемента навигации.

Может быть, что-то вроде этого:

$('a', '.nav').each(function() {
    if(window.location.pathname.indexOf($(this).attr('href')) === 0) {
        $(this).parent().addClass('selected');
    }
});