如何选择具有特定类名的最后一个元素？ [复制]

Question

我有一个元素列表，五个元素的类名总是“current”。其余元素不会。例如：

<li class="item current"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>

如何选择类名为“current”的第五个 li 元素？换句话说，我想对类名为“current”的最后一个元素应用某种样式。类名也将根据单击按钮而改变。如果用户单击下一步按钮，第一个元素将不再具有“当前”类，而第六个元素将添加“当前”类。上面的 HTML 需要如下所示：

<li class="item current"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item current" style="margin-right: 0;"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>

用户点击下一个按钮后，html 将如下所示：

<li class="item"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item current"></li>
<li class="item current" style="margin-right: 0;"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>

Answer 1

使用:last 选择器：

$('li.current:last').css('color', '#f00');

或者使用slice:

$('li.current').slice(-1).css('color', '#f00');

Answer 2

试试:last

$('.item.current:last')

或last()

$('.item.current').last()