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，并且每次都截断到“/”的lastindex。有没有人知道如何实现这一目标？

Answer 1

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

也许是这样的：

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

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

1 个答案: