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

Posted 2023-03-16

【中文标题】JQuery - 如何为每个最后一个列表项添加一个类？

【英文标题】：JQuery - How to add a class to every last list item?

【发布时间】：2010-10-08 12:04:42

【问题描述】：

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

$("#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>

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

【问题讨论】：

这个添加的类是用来在列表底部添加边距的吗？如果是这样，您可以改用 ul 的 margin-bottom 属性。如果没有，请继续。 =P

另外，在这种情况下你不需要做.each，你可以直接做.addClass。 jQuery 会将所有命令应用于整个匹配元素集。

另外，可以在这里找到一个测试不同选择器并了解它们如何工作的好网站：woods.iki.fi/interactive-jquery-tester.html

【参考方案1】：

你可以试试

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

【参考方案2】：

容易犯错误。试试这个：

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

基本上 :last 并没有完全按照你的想法去做。它只匹配文档中的最后一个，而不是每个列表中的最后一个。这就是 :last-child 的用途。

【讨论】：

完美！ - 感谢您花时间帮助我，谢谢

【参考方案3】：

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

匹配最后选择的元素。

所以您的代码正在做的是在<ul> 中获取所有<li> 元素的集合，然后从该集合中获取最后一个值。示例：

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

您的代码将返回元素<li>6</li>。 （在内部，它会收集<li>1</li> 到<li>6</li>，然后去掉最后一个并返回）。

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

【参考方案4】：

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

<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”。

编辑：对不起，误读了这个问题。请忽略这个。

【参考方案5】：

用jquery添加这个

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

【参考方案6】：

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

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

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