Выберите родительский элемент, который имеет определенный класс

Question

Я создал навигационную панель, которая имеет следующий вид разметки:

<ul class="nav"> 
    <li class="active"><a href="blah.html">S</a></li> 
    <li><a href="blah1.html">S1</a></li> 
    <li><a href="blah2.html">S2</a></li> 
    <li><a href="blah3.html">S3</a></li> 
</ul> 

В одном моих событиях здесь, у меня есть доступ к a элементу на который пользователь нажал.

$('.nav').on('click', 'li a', function(){ 
var clickedLink = $(this); 
var prevActiveLI = ? 
var currentClickedAnchorsParentLI = ? 
}); 

Есть две вещи, которые я хочу получить здесь для своей цели. Предыдущий тег li, который имеет класс active, и, во-вторых, тег li для только что щелкнутого a. Как можно получить доступ?

Answer 1

Попробуйте это:

$('.nav').on('click', 'li a', function(){ 
    var clickedLink = $(this); 
    var prevActiveLI = $('.active', $clickedLink.closest('.nav')); 
    var currentClickedAnchorsParentLI = $clickedLink.closest('li'); 
}); 

Answer 2

$('.nav').on('click', 'li a', function(){ 
    var clickedLink = $(this); 
    var prevActiveLI = clickedLink.closest('ul.nav').find('li.active'); 
    var currentClickedAnchorsParentLI = clickedLink.parent(); 
}); 

Answer 3

var $prevLi, 
$currentLi 
; 

$('.nav').on('click', 'li a', function(){ 
var clickedLink = $(this); 
if($currentLi) { 
    $prevLi = $currentLi; 
} 
$currentLi = clickedLink.parent(); 
}); 

Answer 4

$('.nav').on('click', 'li a', function(){ 
    var clickedLink = $(this); 

    var currentClickedAnchorsParentLI = clickedLink.parent(); 

    if(!currentClickedAnchorsParentLI.hasClass("active")) 
    var prevActiveLI = currentClickedAnchorsParentLI.siblings(".active").first(); 
    //else 
    // 
});