jQuery parents() 方法
示例
返回 <span> 的所有祖先元素
$(document).ready(function(){
$("span").parents().css({"color": "red", "border": "2px solid red"});
});
结果
body (曾祖父级祖先)div (祖父级祖先)ul (父级祖先)- li (直接父级) span
自己试一试 »
定义和用法
parents() 方法返回所选元素的所有祖先元素。
祖先元素是指父元素、祖父元素、曾祖父元素等等。
DOM 树：此方法从父元素向上遍历 DOM 元素的祖先，一直到文档的根元素 (<html>)。
注意：如果筛选器参数为空，则此函数将选择一组元素的所有祖先，从直接父元素一直到 <body> 和 <html>。因此，传递选择器表达式以缩小搜索结果通常很有用。
此方法类似于 closest()，因为它们都向上遍历 DOM 树。区别如下：
parents()
- 从父元素开始
- 向上遍历 DOM 树并返回与传递的表达式匹配的所有祖先
- 返回的 jQuery 对象包含零个或多个元素
closest()
- 从当前元素开始
- 向上遍历 DOM 树并返回与传递的表达式匹配的第一个祖先
- 返回的 jQuery 对象包含零个或一个元素
其他相关方法
- parent() - 返回所选元素的直接父元素
- parentsUntil() - 返回两个给定参数之间的所有祖先元素
语法
$(选择器).parents(筛选器)
| 参数 | 描述 |
|---|---|
| 筛选器 | 可选。指定选择器表达式以缩小祖先的搜索范围 注意：要返回多个祖先，请用逗号分隔每个表达式。 |
自己试一试 - 示例
缩小搜索范围
如何使用筛选器参数返回 <span> 的所有 <ul> 元素祖先。
返回多个祖先
如何使用筛选器参数返回 <span> 的所有 <li> 和 <div> 元素祖先。
按标签名称显示元素的祖先
一个演示，它显示了 <span> 元素的祖先实际上是什么。
