选择具有特定类的元素的父级

Question

I built up a navigation bar which has the following sort of markup:

<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>

In one my events here, I have the access to the a element on which the user clicked.

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

There are two things I want to get here for my purpose. The previous li tag which has the active class applied and secondly, the li tag for the a which has just been clicked. How can that be accessed?

Answer 1

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

Answer 2

Try this:

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

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
    //
});