jQuery “active” 父级的类分配

Question

我的主导航中有这个 html:

<div id="navigation">  
  <ul>
     <li>
       <a href="/contact">contact us</a>
     </li>
   <li>
      <a href="/projects">projects</a>       
   </li>
  </ul>
 </div>

我想标记事件链接，所以我使用这个 jquery:

$("div#navigation").find("a[href='" + top.location.pathname + "']").each(function ()
 {
   $(this).addClass("active")
 })

虽然它适用于像domain.com/projects或domain.com/contacts这样的URL，
我对更深层次的 URL 有疑问，以 domain.com/projects/proj-1 为例。
我希望当我转到更深的 URL 时，它将父 URL (domain.com/projects) 标记为事件。我该怎么做？

谢谢!

Answer 1

首先，在您的示例中，您不必使用 .each() 方法，因为您可以像这样直接分配类

$("div#navigation").find("a[href='" + top.location.pathname + "']").addClass("active")

对于问题使用

$("div#navigation").find("a").filter(function(){
    var href =  $(this).attr('href');
    return href!='/' && href !='#' && top.location.pathname.indexOf( href )==0 ;
}).addClass("active");

编辑:进行了一些小更改以满足评论的问题