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