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