在jQuery中，获取一个节点的上一个同辈节点可使用prev()方法，该方法返回匹配元素集合中每个元素紧邻的前一个同辈元素，若不存在则返回空jQuery对象，支持可选参数（如选择器），用于筛选符合条件的上一个同辈节点，$(selector).prev()或$(selector).prev('.class')，需注意，prev()`仅作用于同辈元素，无法跨级获取父级元素的兄弟节点，实际应用中，常结合样式操作、事件绑定等链式方法，实现对前一个节点的动态控制，是DOM节点遍历的常用方法。
jQuery 获取上一个节点：方法、技巧与最佳实践
在 jQuery 的 DOM 操作中，获取相邻节点是前端开发中的常见需求，当我们需要操作某个元素的前一个兄弟节点时，jQuery 提供了多种便捷的方法来简化这一过程，本文将全面介绍如何使用 jQuery 获取上一个节点，包括核心方法 prev() 的详细用法、参数扩展、性能优化、注意事项及实际应用场景，帮助开发者掌握这一重要技能。
核心方法：prev() 获取直接前一个元素节点
jQuery 中最常用的获取上一个节点的方法是 prev()，该方法用于匹配当前元素集合中每个元素的直接前一个兄弟元素节点（即同级中紧邻的前一个元素节点），并以 jQuery 对象的形式返回结果，便于后续操作。
基础语法
$(selector).prev()
selector：目标元素的 jQuery 选择器（可以是元素本身、类名、ID 等）。- 返回值：一个 jQuery 对象，包含匹配的直接前一个元素节点，如果没有前一个元素，返回空的 jQuery 对象（
length为 0）。
示例说明
假设有以下 HTML 结构：
<div class="container"> <p>第一个段落</p> <span>前一个 span</span> <div id="target">目标元素</div> <a href="#">后一个链接</a> </div>
若要获取 #target 的上一个节点（即 <span>），可以这样写：
$("#target").prev(); // 返回 jQuery 对象，包含 <span> 元素
链式调用
prev() 返回的是 jQuery 对象，因此可以链式调用其他 jQuery 方法，例如修改样式、绑定事件等：
$("#target").prev()
.css("color", "red")
.click(function() {
alert("点击了前一个 span 元素");
});
实际应用示例
// 高亮显示当前项的前一个项
$(".menu-item").click(function() {
// 移除所有高亮
$(this).siblings().removeClass("highlight");
// 高亮当前项和前一个项
$(this).addClass("highlight");
$(this).prev().addClass("highlight");
});
扩展用法：通过参数筛选上一个节点
prev() 方法支持传入选择器参数，用于筛选符合条件的上一个节点，只有当上一个节点匹配该选择器时，才会被包含在返回结果中，这种方法在复杂 DOM 结构中特别有用。
语法
$(selector).prev(filter)
filter：可选参数，一个字符串形式的 jQuery 选择器（如类名、标签名、属性选择器等）。
示例
继续使用上面的 HTML 结构，假设我们只想获取 #target 上一个特定类名的节点：
<div class="container"> <p class="prev-item">前一个段落（带 prev-item 类）</p> <span>普通 span</span> <div id="target">目标元素</div> </div>
获取 #target 上一个 class="prev-item" 的节点：
$("#target").prev(".prev-item"); // 返回 jQuery 对象，包含 <p class="prev-item">
如果上一个节点不匹配选择器,则返回空对象：
$("#target").prev("span"); // 返回空对象，因为上一个节点是 p，不是 span
复杂选择器示例
<div class="container"> <p class="item active">活动项</p> <div class="item warning">警告项</div> <div class="item" id="target">目标元素</div> </div>
使用复杂选择器获取特定状态的上一项：
// 获取上一个带有 warning 类的项
$("#target").prev(".warning");
// 获取上一个活动项
$("#target").prev(".active");
// 获取上一个 div.item
$("#target").prev("div.item");
链式调用与筛选结合
// 获取上一个特定类名的元素并执行操作
$("#target").prev(".highlight")
.css("background-color", "yellow")
.fadeTo(300, 0.8);
注意事项：prev() 的关键细节
使用 prev() 时，需要注意以下几点，避免踩坑：
仅匹配元素节点，忽略文本/注释节点
prev() 只返回元素节点（如 <p>、<div>、<span> 等），不会包含文本节点（如换行符、空格）或注释节点。
<div class="parent"> 文本节点（换行） <span>上一个 span</span> <div id="target">目标元素</div> </div>
$("#target").prev() 只会返回 <span>，不会返回前方的文本节点（换行符）。
仅限同级节点，不跨层级
prev() 只查找同级的前一个节点，不会向上查找父级节点。
<div class="parent">
<div class="child">
<span>子级 span</span>
<div id="target">目标元素</div>
</div>
<p>同级 p（不是目标的上一个节点）</p>
</div>
$("#target").prev() 返回的是 <span>（同级前一个），而不是 <p>（父级的兄弟节点）。
第一个节点没有前一个节点时返回空对象
如果目标元素是其父级下的第一个子元素，则 prev() 返回空的 jQuery 对象（length 为 0），不会报错。
<div class="parent"> <div id="first">第一个元素</div> <div>第二个元素</div> </div>
$("#first").prev() 返回 []（空数组），使用时可通过 length 判断是否存在：
if ($("#first").prev().length > 0) {
console.log("存在前一个节点");
} else {
console.log("没有前一个节点");
}
性能考虑
在处理大量元素时,prev() 方法会遍历 DOM 树，虽然 jQuery 已经做了优化，但在性能敏感的场景中仍需注意：
// 不推荐：在循环中多次调用 prev()
$(".items").each(function() {
$(this).prev().addClass("prev-item");
});
// 推荐：先获取所有元素，再批量处理
var $items = $(".items");
var $prevItems = $items.prev();
$prevItems.addClass("prev-item");
与其他方法的对比：prev() vs prevAll() vs prevUntil()
jQuery 提供了多个获取"前一个节点"相关的方法，需根据需求选择：
| 方法 | 作用 | 示例（基于前面的 HTML 结构） |
|---|---|---|
prev() |
获取直接前一个兄弟元素节点 | $("#target").prev() → <span> |
prevAll() |
获取所有前面的兄弟元素节点（按 DOM 顺序） | $("#target").prevAll() → `< |
