前面刚聊完 first() 方法怎么取第一个元素，那取之后一个元素自然就是 last() 方法的活儿了。它同样是 jQuery 的内置方法，语法结构和 first() 对称，用法也如出一辙。把这两个方法搭配着用，可以灵活地在元素的首尾之间切换操作。
语法形式
$(selector).last()
同样不需要任何参数，selector 是必填的，用来圈定你要操作的候选元素范围。方法返回的是一个只包含之后一个匹配元素的 jQuery 对象，链式调用没有问题。
示例一：从多个嵌套元素中定位之后一个
这个例子和之前 first() 的示例结构很相似，但聚焦在尾部。页面上有四个 div，每个 div 内部各有一个 span 元素。$("div span") 能命中全部四个 span，last() 则从中取出排在之后的那个，也就是 "span4"，并给它加上背景高亮。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div span").last().css("background-color", "lightblue");
});
});
</script>
<style>
div {
border: 1px solid blue;
}
</style>
</head>
<body id = "main">
<h2> 代码号学习编程：last() 方法定位之后一个 span </h2>
<div>
<span> 代码号学员-A </span>
</div>
</br>
<div>
<span> 代码号学员-B </span>
</div>
</br>
<div>
<span> 代码号学员-C </span>
</div>
</br>
<div>
<span> 代码号学员-D </span>
</div>
<p> 点击下方按钮，高亮之后一个 span 元素。 </p>
<button> 点击高亮尾部 </button>
</body>
</html>
在这个布局中，虽然四个 span 分属不同的父级 div，但在 jQuery 的选取结果里它们按照文档顺序排列，"代码号学员-D" 所在的 span 就是整个的之后一个，last() 会精准地把它找出来。记住，last() 看的是文档流里的位置，和父容器是谁没有直接关系。
示例二：在混杂元素中抓取之后一个段落
实际页面中往往不会只有同一种标签，各种元素交错出现的情况很常见。下面这个例子就模拟了这种场景，div、p、h3 混排在一起。我们用 $("p") 选中所有段落元素，然后用 last() 把位置最靠后的那个段落标记出来，给它加上黄颜色背景。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").last().css("background-color", "yellow");
});
});
</script>
</head>
<body id = "main">
<h2> 代码号学习编程：last() 方法选中末位段落 </h2>
<div style = "border: 1px solid blue;">
div 元素
</div>
<p style = "border: 1px solid blue;">
这是第一个段落
</p>
<p style = "border: 1px solid blue;">
第二个段落元素
</p>
<h3 style = "border: 1px solid blue;">
h3 标题
</h3>
<p style = "border: 1px solid blue;">
又一个段落元素，这是之后一个啦
</p>
</br>
<span> 点击下方按钮，高亮之后一个段落元素。 </span>
</br> </br>
<button> 点击高亮尾部 </button>
</body>
</html>
虽然页面上 h3 标题在第三个段落的上面，但这并不妨碍 $("p").last() 正确识别到 "又一个段落元素，这是之后一个啦" 这个 p 标签。jQuery 的 last() 只在自己所属的那组选择结果里找末尾，不受其他元素干扰。
本节课程知识要点
last() 和 :last 选择器看起来像是同一回事，但它的内部机制有区别。:last 是在选择器层面做的过滤，而 last() 是遍历方法，用在链式调用中语义更清晰。我个人在开发里，如果只是取之后一个元素，习惯用 last() 而非 :last，因为 last() 在阅读代码时意图更直白，尤其是在链式操作堆积较长的时候，一眼就能看出这一步是在做尾元素提取。
还有一个值得留意的细节，last() 即使面对空也不会抛出异常，只是返回一个空的 jQuery 对象。这就意味着不用先判断元素是否存在，直接调 last() 然后链式操作是安全的。在 2026 年维护任何包含 jQuery 的项目时，first() 和 last() 这对组合仍然是操作元素时顺手且可靠的帮手。
