jQuery选择菜单的顶部li答案

【问题标题】：jQuery selecting the top li of a menujQuery选择菜单的顶部li
【发布时间】：2012-08-17 15:37:42
【问题描述】：

很抱歉提出了这个愚蠢的问题。

我有一个类似这样的菜单：

<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 上的类。凉爽的。但我真正想做的是改变顶级li上的课程。换句话说，如果选择了“子子菜单项”，则会一直沿树向上移动并更改包含该链接的第一个 li。

非常感谢任何帮助。

谢谢，

安迪。

【问题讨论】：

标签： javascript jquery css-selectors

【解决方案1】：

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

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

.addClass() 也可能是您在这里所追求的 :)

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

使用>

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

【讨论】：