Question

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

<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

$('.item.current:last')

或last()

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

Answer 2

使用:last选择器：

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

或者使用slice：

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

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

2 个答案: