jQuery выбирает верхнюю часть меню

Question

Извините за нубистский вопрос.

У меня есть меню, похожее на это:

<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, содержащий эту ссылку.

Был бы признателен за любую помощь.

Спасибо,

Энди.

Answer 1

Вы можете использовать .parents() и :last (так как они возвращены в указанном порядке ... верхний родительский элемент последний) при поиске <li>вот так:

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

Также .addClass(), вероятно, то, что вы ищете здесь:)

Answer 2

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

Answer 3

использование >

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