JQuery - 如何向每个最后一个列表项添加一个类？

Question

这里有一些代码不起作用：

$("#sidebar ul li:last").each(function(){
      $(this).addClass("last");
});

基本上我有 3 个列表，并且想要向每个无序列表中最后出现的每个项目添加一个类（最后一个）。

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li class="last">Item 3</li>
</ul>

希望这是有道理的， 干杯!

Answer 1

很容易犯的错误。 试试这个：

$("#sidebar ul li:last-child").addClass("last");

基本上 :last 并不完全符合你的想法。 它仅匹配文档中的最后一个，而不是每个列表中的最后一个。 这就是 :last-child 的用途。

Answer 2

用 jquery 添加这个

$("ul li").last().addClass('last');

Answer 3

不起作用的原因是 :last 仅匹配一个元素。 来自 jQuery 文档：

匹配最后选择的元素。

因此，您的代码所做的就是获取

中所有
• 元素的集合，然后从该集合中获取最后一个值。 示例：

 <ul>
   <li>1</li>
   <li>2</li>
 </ul>
 <ul>
   <li>3</li>
   <li>4</li>
 </ul>
 <ul>
   <li>5</li>
   <li>6</li>
 </ul>

您的代码将返回元素

6

。 （在内部，它会收集

1

到

6

然后删除最后一个并将其返回）。

您正在寻找的是这里其他答案所说的内容：:last-child。

Answer 4

或者你可以给你的列表一个 id 并将其用作 jquery 调用的上下文。

<ul id="myList">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<ul id="anotherList">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

然后你可以这样做：

jQuery("li:last", "ul#myList").addClass("lastItem");

现在第一个列表中的最后一个 li 将具有类“lastItem”。

编辑：抱歉，看错问题了。 请忽略这一点。

Answer 5

如果您需要将类添加到 3 个单独的列表中，您可以为它们分配一个类并使用“each”：

$('#sidebar ul.class li:last-child').each(function(e){
    $(this).addClass("last");
});

这应该完全按照您的预期工作。

Answer 6

你可以试试

$('#sidebar ul li:last').addClass('last');