jQuery 遍历 - 祖先
jQuery 遍历 - 祖先元素 (Ancestors)
在 jQuery 中，祖先遍历用于从当前选中的元素向上查找其父级、祖父级等所有祖先元素。这对于动态定位、样式修改或数据获取非常有用。
一、核心方法
1.parent()- 获取直接父元素
只返回一级父元素。
// 语法$(selector).parent();$(selector).parent("selector");// 可选：过滤特定父元素// 示例$("li").parent();// 返回 <ul> 或 <ol>$("li").parent("div");// 如果直接父元素是 div 则返回，否则返回空2.parents()- 获取所有祖先元素
返回从当前元素到<html>标签之间的所有祖先元素（按从近到远排序）。
// 语法$(selector).parents();$(selector).parents("selector");// 可选：过滤特定祖先元素// 示例$("span").parents();// 返回 span 的所有祖先 (li, ul, div, body, html...)$("span").parents("ul");// 只返回所有的 <ul> 祖先元素3.parentsUntil()- 获取直到指定元素前的祖先
返回介于当前元素和指定选择器匹配的元素之间的祖先元素（不包含指定元素本身）。
// 语法$(selector).parentsUntil("selector");$(selector).parentsUntil("selector","filter");// 可选：额外过滤// 示例// HTML: <div class="container"> <ul> <li> <span>Text</span> </li> </ul> </div>$("span").parentsUntil("div");// 返回：<li>, <ul> (不包含 .container 的 div)$("span").parentsUntil("body","ul");// 返回：所有 <ul> 祖先，直到 body 之前二、方法对比与返回结果
| 方法 | 返回范围 | 返回类型 | 典型用途 |
|---|---|---|---|
parent() | 仅直接父级 | 单个元素 (或空) | 获取直接容器 |
parents() | 所有祖先 | jQuery 对象 (多个) | 查找所有上级容器 |
parentsUntil() | 中间祖先 | jQuery 对象 (多个) | 限定查找范围 |
注意：
parent()返回的是单个元素（如果存在），即使链式调用也是基于单个元素。parents()和parentsUntil()返回的是多个元素的 jQuery 集合，顺序是从子到父（最近的祖先在前）。
三、代码示例
场景 1：高亮所有祖先容器
<divid="app"><divclass="box"><ul><liclass="item"><spanclass="target">点击我</span></li></ul></div></div><script>$(".target").click(function(){// 获取所有祖先并添加红色边框$(this).parents().css("border","2px solid red");});</script>场景 2：查找特定层级的祖先
// 只获取最近的 <ul> 祖先var$ul=$("li.item").parents("ul").first();// 获取所有 <div> 祖先var$divs=$("span").parents("div");console.log($divs.length);// 输出找到的 div 数量场景 3：结合parentsUntil进行范围限制
<divclass="level1"><divclass="level2"><divclass="level3"><p>内容</p></div></div></div><script>// 获取 .level3 和 .level1 之间的祖先 (即 .level2)$("p").parentsUntil(".level1").css("background","yellow");</script>四、常用技巧
1. 链式调用与end()
在遍历祖先后，如果需要回到原始选择集，可以使用.end()。
$("li").parents("ul")// 切换到所有 ul 祖先.addClass("active")// 给 ul 加样式.end()// 回到原来的 li 选择集.css("color","red");// 给 li 加样式2. 获取祖先的特定属性
// 获取 li 的父级 ul 的 IDvarulId=$("li").parent().attr("id");// 获取 span 的所有祖先中第一个 div 的数据属性vardataVal=$("span").parents("div").first().data("info");3. 判断是否存在特定祖先
if($("span").parents("#main-container").length>0){console.log("span 在 #main-container 内部");}五、注意事项
- 不包含自身：
parents()系列方法不包含当前选中的元素本身。 - 不包含文档根：通常返回到
<html>或<body>为止，不会包含document对象。 - 性能：
parents()会遍历整个 DOM 树直到根，如果 DOM 层级很深，性能略低于parent()。 - 选择器过滤：所有方法都支持传入选择器字符串进行过滤，这比获取所有后再用
.filter()性能更好。
这些方法构成了 jQuery 向上遍历 DOM 树的核心能力，配合children()(向下) 和siblings()(横向) 可以灵活处理各种 DOM 结构。