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的{{1}}标记。怎么可以访问？

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

试试这个：

$('.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
    //
});

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

4 个答案: