Question

我想查找列表的最后一个活动类。我尝试过如下。但它返回所有活动的类文本。 li活动类是动态添加的。

＆＃13;

alert($('.test li.active:last-child').find('a').text());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="test">
  <li class="active"><a href="">test1</a>
  </li>
  <li class="active"><a href="">test2</a>
  </li>
  <li class="active"><a href="">test3</a>
  </li>
  <li class="active"> <a href="">test4</a>
  </li>
  <li class=""> <a href="">test5</a>
  </li>
</ul>

＆＃13;

fiddle link

Answer 1

:last-child表示其父级的最后一个子元素。因为在您的示例中，li.active不是最后一个孩子，因此无效。

您需要使用:last选择器而不是:last-child选择器。

$('.test li.active:last').find('a').text()

Fiddle

Answer 2

使用:last或last()

$('.test li.active:last')
$('.test li.active').last()

Answer 3

尝试使用jQuery＆＃39; last method：

alert($('.test li.active').last().find('a').text());

或the selector：

alert($('.test li.active:last').find('a').text());

Answer 4

:last-child只会考虑层次结构。

这背后的想法是你可能需要一个规则，如：

li.active:last-child

这表明＆＃34;选择所有li个元素，这些元素具有类active并且是最后一个子元素＆＃34;。

它并不代表与选择器匹配的最后一个子元素。

但是，您可以使用jQuery＆＃39; :last或.last()来获取与选择器匹配的最后一个元素。

$('.test li.active:last')

$('.test li.active').last()

Answer 5

您需要的伪选择器是:last，如：

$('li.active:last')

工作示例：

＆＃13;

$(document).ready(

    function() {
        $('li.active:last').css('border','1px solid red');
    }

);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="test">
<li class="active"><a href="">test1</a></li>
<li class="active"><a href="">test2</a></li>
<li class="active"><a href="">test3</a></li>
<li class="active"><a href="">test4</a></li>
<li><a href="">test5</a></li>        
</ul>

＆＃13;

N.B。 Javascript没有像:last那样聪明的计算伪选择器，所以在原生javascript中你需要更复杂一点。

jQuery的原生javascript等同于

$('li.active:last').css('border','1px solid red');

是

var actives = document.querySelectorAll('li.active');
var lastActive = actives[(actives.length - 1)];
lastActive.style.border = '1px solid red';

在html中找到最后一个活动元素

5 个答案: