jQuery | :nth-last-of-type() 选择器

介绍

在 jQuery 中，:nth-last-of-type() 选择器用于选择倒数第几个指定类型的元素。它根据元素在其父元素中的位置来选择元素。

该选择器可以用于选择制定类型元素的倒数第几个子元素，或者筛选出特定类型元素中的倒数第几个。

语法

:nth-last-of-type(index/even/odd/equation)

• index：指定要选择的倒数第几个元素，可以是正整数、负整数或 0。正数表示从第一个元素开始计数，负数表示从最后一个元素开始计数。例如 3 表示倒数第三个元素，-2 表示倒数第二个元素。
• equation：位置公式，可使用 n 表示一个周期内的索引，以及 +、-、* 和 / 运算符来定义位置。例如 2n+1 表示奇数位置的元素， 3n 表示每三个元素一个周期内的位置。

示例

HTML

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

jQuery 代码

选择倒数第三个 <li> 元素：

$("li:nth-last-of-type(3)").css("color", "red");

选择倒数第偶数个 <li> 元素：

$("li:nth-last-of-type(even)").css("background-color", "gray");

选择倒数第奇数个 <li> 元素：

$("li:nth-last-of-type(odd)").css("background-color", "lightgray");

选择倒数第四个之后的 <li> 元素：

$("li:nth-last-of-type(n+4)").css("font-weight", "bold");

结论

使用 :nth-last-of-type() 选择器，我们可以根据元素在其父元素中的位置来选择元素。这是一个非常有用的选择器，可以帮助我们方便地筛选和操作特定位置的元素。