Как выбрать самый верхний элемент <li>в иерархическом меню в jQuery?

Question

Я реализую строку меню, используя jQuery с вложенным набором списков <ul>, где каждый <li> содержит тег <a>. Учитывая, что я могу сопоставить конкретный тег <a> с помощью атрибута href, как мне пройтись по меню, чтобы получить самый верхний элемент <li>, включающий в себя?

Мне нужно это, чтобы я мог установить class = "current", который изменяет подсветку, чтобы отразить вновь выбранный элемент.

РЕДАКТИРОВАТЬ: Всем, кто ответил, спасибо. Это было образование, как обычно. Я решил использовать решение @ PKG ... оно идеально вписывается в мою реализацию.

Answer 1

Функция ниже вернет верхний уровень <li> только

$(this).parents("li").last();

Answer 2

Хотя ваш вопрос неопределенный, я предполагаю, что вы пытаетесь что-то вроде этого:

// This will loop through all of the ul's on the page and handle the first li
$('ul').each(function(index,element){
    var first_li = $(element).find('li:first');
    // Do something with the li
}); 

Answer 3

$(this).closest("li");

Если вы хотите первый LI во всем UL, в котором он находится:

$(this).closest("ul").find("li:first");

Answer 4

Вы можете использовать parents() примерно так:

var url = window.location.href; // (or however you prefer)

$('a[href*="'+url+'"]').parents('li').addClass('current');

Теперь, как бы я это сделал, это добавить класс к самому верхнему li или что-то, чтобы сузить его. В противном случае он добавит класс ко всем элементам списка в пути, что также часто является тем, что вам нужно.

Рабочая скрипка: http://jsfiddle.net/b3RX8/1/

Answer 5

Если вы обрабатываете событие клика <a>, вы можете использовать:

$(this).closest('li')