首页
/ 正文

jQuery last() 方法（建议收藏）

更新时间: 2025-04-06 17:53:45

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习，欢迎点击围观

引言：为什么需要学习 jQuery last() 方法？

在现代 Web 开发中，DOM 操作是前端工程师的核心技能之一。jQuery 作为简化 JavaScript 操作的利器，提供了大量便捷的方法。其中，last() 方法是筛选元素集合的常用工具，尤其在需要定位列表、表单或动态生成内容的场景中不可或缺。本文将从零开始，通过循序渐进的方式，带您掌握 last() 方法的核心原理、实际应用及常见问题的解决方案。

一、理解 jQuery 的选择器与过滤方法

1.1 选择器基础：如何定位目标元素？

在 jQuery 中，所有操作都始于选择器（Selector）。例如：

$("div");      // 选择所有 div 元素
$(".my-class"); // 选择所有 class 为 "my-class" 的元素
$("#my-id");   // 选择 id 为 "my-id" 的元素

选择器返回的是一个 jQuery 对象集合，包含所有匹配的元素。但很多时候，我们只需要集合中的最后一个元素，这就需要过滤方法的帮助。

1.2 过滤方法的分类

jQuery 提供了多种过滤方法，如：

first()：获取集合中的第一个元素
last()：获取集合中的最后一个元素
eq(index)：通过索引定位元素
not(selector)：排除符合条件的元素

这些方法通过链式调用，能精准定位目标元素。例如：

$("li").last().css("color", "red"); // 将最后一个列表项文本变为红色

二、深入剖析 jQuery last() 方法

2.1 方法定义与语法

last() 方法的作用是从匹配的元素集合中返回最后一个元素。其语法非常简单：

$(selector).last();

它返回一个新的 jQuery 对象，仅包含原集合中的最后一个元素。

2.2 核心原理：如何确定“最后一个”？

想象一个书架上的书籍，每本书代表一个 DOM 元素。last() 的逻辑类似于“找到书架上最后一本书”。具体实现中：

jQuery 会遍历所有匹配的元素
记录元素的索引（从 0 开始）
返回索引等于集合长度减一的元素

例如，若选择器匹配到 3 个元素，则索引为 2 的元素会被选中。

2.3 实战示例：基础用法演示

案例 1：高亮最后一个列表项

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

$("ul li").last().css({
  "background-color": "#FFD700",
  "font-weight": "bold"
});

执行后，第三个列表项会被添加黄色背景和加粗样式。

案例 2：动态获取最后一个表单元素

假设页面动态生成多个输入框：

// 假设页面上有多个 input 元素
var lastInput = $("input").last();
lastInput.val("这是最后一个输入框的默认值");

三、与类似方法的对比分析

3.1 last() vs eq(-1)

虽然 last() 和 eq(-1) 的效果相同，但两者实现逻辑不同：

last() 是专门针对末位元素的方法
eq(-1) 通过负索引（从末尾倒数）实现，索引值为 -1 对应最后一个元素

示例对比：

// 方法 1：使用 last()
$("div").last().hide();

// 方法 2：使用 eq(-1)
$("div").eq(-1).hide();

3.2 last() vs slice()

slice() 方法可以截取元素集合的子集：

// 获取前两个元素
$("div").slice(0, 2); 

// 获取最后一个元素（等同于 last()）
$("div").slice(-1);

但 slice(-1) 返回的是包含最后一个元素的集合，而 last() 返回的是单个元素对象。因此，last() 更适合需要单个元素操作的场景。

四、进阶用法与高级技巧

4.1 结合其他选择器链式调用

通过组合选择器和方法，可以实现复杂操作。例如：

// 找到最后一个类名为 .active 的 div
$("div.active").last().addClass("highlight");

4.2 在动态内容中使用

当页面内容动态变化时，last() 能精准定位新添加的元素：

// 每次点击按钮添加新 div，高亮最后一个
$("#add-btn").click(function() {
  $("<div>新内容</div>").appendTo("body");
  $("div").last().css("border", "2px solid blue");
});

4.3 结合 CSS 伪类 :last-child 的区别

CSS 的 :last-child 伪类与 last() 方法功能相似，但核心区别在于：

作用阶段：CSS 在渲染时静态定位，而 jQuery 在 DOM 操作时动态定位
适用场景：静态样式建议用 CSS，动态交互建议用 jQuery

示例对比：

<!-- CSS 方式 -->
<style>
  li:last-child { color: red; }
</style>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- jQuery 方式 -->
<script>
  $("ul li").last().css("color", "red");
</script>

五、常见问题与解决方案

5.1 为什么获取不到最后一个元素？

可能原因：

元素尚未加载完成：需确保代码在 DOM 完全加载后执行
选择器错误：检查元素标签名、类名或 ID 是否正确
元素为空：当集合中没有匹配元素时，last() 返回空对象

解决方案：

$(document).ready(function() {
  var $lastItem = $("li").last();
  if ($lastItem.length > 0) {
    $lastItem.addClass("active");
  } else {
    console.log("未找到匹配元素");
  }
});

5.2 如何处理多级嵌套结构？

当元素层级复杂时，可结合父元素定位：

// 获取某 div 下最后一个 p 元素
$("#parent-div p").last().text("这是最后一个段落");

5.3 性能优化建议

避免频繁操作：若需多次使用最后一个元素，建议先缓存结果
减少选择器范围：精确选择器能提升查找速度

// 低效写法
$("body *").last();

// 优化写法（假设已知父容器）
$("#content-container li").last();

六、完整案例：实现动态表单验证

6.1 需求场景

构建一个表单，要求用户输入至少三个邮箱地址，并在提交时：

高亮最后一个输入框
验证最后一个邮箱格式是否合法

6.2 HTML 结构

<form id="email-form">
  <div class="email-field">
    <input type="email" placeholder="邮箱地址">
    <button type="button" class="add-btn">+ 添加邮箱</button>
  </div>
  <button type="submit">提交</button>
</form>

6.3 jQuery 实现

$(document).ready(function() {
  // 动态添加输入框
  $(".add-btn").click(function() {
    var $newField = $(".email-field:first").clone();
    $newField.find("input").val("");
    $newField.insertAfter(".email-field:last");
  });

  // 表单提交验证
  $("#email-form").submit(function(e) {
    e.preventDefault();
    
    // 获取所有邮箱输入框
    var $inputs = $(".email-field input");
    
    // 至少三个输入框
    if ($inputs.length < 3) {
      alert("请至少输入三个邮箱地址");
      return;
    }
    
    // 验证最后一个邮箱
    var lastInput = $inputs.last();
    var email = lastInput.val();
    
    if (!/^\w+@\w+\.\w+$/.test(email)) {
      lastInput.css("border-color", "red");
      alert("最后一个邮箱格式不正确");
    } else {
      alert("提交成功！");
    }
  });
});

七、结论：掌握 last() 方法的实战价值

通过本文的学习，您已掌握以下核心能力：

基础用法：快速定位集合中的最后一个元素
方法对比：理解 last() 与其他过滤方法的异同
进阶技巧：结合动态内容和复杂场景的应用
问题解决：处理常见错误与性能优化策略

在实际开发中，jQuery last() 方法 是 DOM 操作的高频工具，尤其在表单处理、列表渲染和动态 UI 设计中不可或缺。建议通过不断实践案例，逐步内化其使用逻辑，最终达到灵活运用的水平。

通过本文的系统讲解，开发者不仅能够掌握 jQuery last() 方法 的技术细节，还能构建起对 jQuery 过滤方法的整体认知框架。希望这些内容能为您的前端开发之路提供切实的帮助！