jQuery :nth-last-of-type() 选择器（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言：选择器在前端开发中的作用

在前端开发中，选择器是操作 DOM 元素的核心工具。无论是 CSS 还是 jQuery，选择器的灵活性直接影响到代码的简洁性和效率。jQuery :nth-last-of-type() 选择器作为 jQuery 提供的高级选择器之一，能够精准定位元素在父容器中的倒序位置，尤其在需要动态处理列表或分页场景时，展现出独特优势。本文将从基础概念到实战案例，逐步解析这一选择器的使用方法与技巧。

一、基础概念：什么是 :nth-last-of-type()？

1. 选择器的定位逻辑

:nth-last-of-type() 是 CSS3 引入的选择器，后被 jQuery 完全支持。其功能是从父容器的最后一个子元素开始，按类型倒序选择指定位置的元素。这里的“类型”指的是元素的标签名，例如 <div> 和 <p> 属于不同类型，但多个 <li> 元素则视为同一类型。

形象比喻：
假设你有一排书架，每本书有不同的颜色和厚度。:nth-last-of-type() 相当于从书架的最末端开始，逐个数数，选择第 n 本与当前书本类型相同的书。

2. 与 :nth-of-type() 的对比

• :nth-of-type(n)：从第一个元素开始正序计数，选择第 n 个同类型元素。
• :nth-last-of-type(n)：从最后一个元素开始倒序计数，选择第 n 个同类型元素。

示例：

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

• $('li:nth-of-type(2)') 会选择 Banana（正序第二个）。
• $('li:nth-last-of-type(2)') 会选择 Banana（倒序第二个，因为倒序是 Orange、Banana、Apple）。

二、语法解析与参数详解

1. 基础语法

$( ":nth-last-of-type(an + b)" )

其中：

• a 和 b 是整数，可以是正数、负数或零。
• n 是隐含的变量，取值为自然数（0, 1, 2, ...）。

2. 参数规则与常见用法

3. 负数参数的特殊含义

当参数为负数时，例如 -n + 3，其效果会变得复杂，需结合具体场景谨慎使用。例如：

$('div:nth-last-of-type(-n+3)')

此表达式会选择倒序中前三个元素（即正序中的前三个元素），因为负数参数会反转计数方向。

三、实战案例：如何使用 nth-last-of-type()？

案例 1：高亮列表项的倒数第二个元素

HTML 结构：

<ul class="product-list">
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
  <li>Product 4</li>
</ul>

jQuery 代码：

$(".product-list li:nth-last-of-type(2)").css("background-color", "#FFD700");

效果：
列表项 Product 3 的背景色会被设置为金色（因为倒序中第二个元素是 Product 3）。

案例 2：动态隐藏倒数前三个段落

HTML 结构：

<div class="content">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
</div>

jQuery 代码：

$(".content p:nth-last-of-type(-n+3)").hide();

效果：
倒数前三个段落（即正序中的 Paragraph 3、4、5）会被隐藏。

四、进阶技巧：与 CSS 选择器的配合

技巧 1：结合其他选择器实现复杂筛选

// 选择 class 为 "container" 的 div 内，倒数第二个 <article> 元素
$(".container article:nth-last-of-type(2)").addClass("highlight");

技巧 2：动态计算位置参数

假设需要根据页面元素数量动态选择倒数第 n 个元素：

const totalItems = $(".items > li").length;
const targetIndex = totalItems - 1; // 倒数第一个的索引为 totalItems -1（从0开始）
$(".items li:nth-last-of-type(" + (targetIndex + 1) + ")").css("color", "red");

五、常见问题与解决方案

问题 1：选择器未生效，可能原因是什么？

• 元素类型不匹配：确保目标元素与选择器的标签名一致（例如 <div> 不能匹配 <section>）。
• 父容器选择错误：检查是否指定了正确的父级容器（如 .parent > :nth-last-of-type()）。
• 参数计算错误：负数或公式参数可能导致意外结果，建议先用简单数值测试。

问题 2：如何与 :nth-child() 区别使用？

• :nth-child()：按元素在父容器中的总顺序计数，不区分类型。
• :nth-last-of-type()：仅按同类元素倒序计数。

示例对比：

<div class="container">
  <div>Item 1</div>
  <p>Paragraph 1</p>
  <div>Item 2</div>
</div>

• $('.container :nth-child(2)') 会选择 <p>（第二个子元素）。
• $('.container div:nth-last-of-type(1)') 会选择最后一个 <div>（即 Item 2）。

六、应用场景与学习建议

典型场景

1. 分页导航：高亮显示倒数第二个分页按钮。
2. 列表优化：对倒数前几项元素添加特殊样式或行为。
3. 响应式布局：根据屏幕尺寸动态调整末尾元素的显示。

学习路径建议

1. 掌握基础选择器（如 :first-child, :last-child）。
2. 对比学习 :nth-of-type() 与 :nth-last-of-type() 的差异。
3. 结合 odd/even 参数实现条纹表格或交替背景。

结论：选择器是开发效率的加速器

jQuery :nth-last-of-type() 选择器通过精准的倒序定位能力，简化了复杂 DOM 操作的代码逻辑。无论是处理动态列表还是优化用户体验细节，它都能提供高效解决方案。建议读者通过实际项目不断实践，逐步掌握选择器的组合与参数规则，最终实现代码的简洁与优雅。

（字数统计：约 1800 字）