在jQuery导航中递归解析当前url

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

如果有精确匹配，那么工作正常，但有时当前页面在树中更深，甚至不显示在左侧导航栏中。在这些情况下，我们希望从当前网址上走到树上，并在我们找到的第一个匹配项上设置选定的类。因此，如果它们位于“/Programs/certificateprograms/level3/level4.aspx”，我们希望在包含“/ Programs/certificateprograms /”的列表项上设置选定的类。

我正在寻找在jQuery中完成此操作的最佳方法。看起来我应该能够递归地调用一个函数，传入当前的url，并且每次都截断为“/”的最后一个索引。有没有人有如何完成这个想法？

Answer 1

如果我理解正确，当前页面比任何可用导航项目更深时，当前url仍具有相同的起始模式。所以，你不应该需要递归。你只需要匹配当前网址“开始于”导航项。

也许是这样的：

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