jQuery选择菜单的顶部li

时间:2010-12-21 12:22:49

标签: javascript jquery css-selectors

对于这个noobish问题感到抱歉。

我有一个类似的菜单:

<div id="navigation">
  <ul>
    <li><a href="url">menu item</a></li>
    <li><a href="url">menu item</a>
      <ul>
        <li><a href="url">sub menu item</a></li>
        <li><a href="url">sub menu item</a>
          <ul>
            <li><a href="url">sub sub menu item</a></li>
            <li><a href="url">sub sub menu item</a></li>
            <li><a href="url">sub sub menu item</a></li>
          </ul>
        </li>
        <li><a href="url">sub menu item</a></li>
        <li><a href="url">sub menu item</a></li>
      </ul>
    </li>
    <li><a href="url">menu item</a></li>
    <li><a href="url">menu item</a></li>
  </ul>
</div>

我正在尝试更改所选页面的类。我就是这样的:

$(function(){
     var path = location.pathname.substring(1);
     if ( path ){
  $('#navigation a[href$="' + path + '"]').parent().attr('class', 'selected');
  }
  });

哪个更改了父李的课程。凉。但我真正想做的是改变顶级李的班级。换句话说,如果选择“子子菜单项”,则会一直向上移动树并更改包含该链接的第一个li。

非常感谢任何帮助。

谢谢,

安迪。

3 个答案:

答案 0 :(得分:6)

在查找<li>时,您可以使用.parents():last(因为它们按照找到的顺序返回...顶级父级是最后一个),如下所示:

$('#navigation a[href$="' + path + '"]').parents('li:last').addClass('selected');

同样.addClass()可能就是你在此之后所说的那样:)

答案 1 :(得分:0)

使用>

$('#navigation > ul > li > a[href$="' + path + '"]')

答案 2 :(得分:0)

$('#navigation>ul>li:has(a[href$="' + path + '"])')