jQuery parents() 方法
-
定义和用法
parents() 方法返回被选元素的所有祖先元素。祖先是父、祖父、曾祖父,依此类推。DOM 树:该方法从父元素向上遍历 DOM 元素的祖先,直至文档根元素的所有路径(<html>)。注意:如果 filter 参数为空,该方法将从直接父元素直至 <body> 和 <html> 的所有路径中选取元素集合中的所有祖先。因此传递一个缩小搜索结果范围的选择器表达式是非常有用的。该方法与 closest()都是向上遍历 DOM 树,不同点是:parents()- 从父元素开始
- 沿 DOM 树向上遍历,并返回匹配所传递的表达式的所有祖先
- 返回包含零个、一个或多个元素的 jQuery 对象
closest()- 从当前元素开始
- 沿 DOM 树向上遍历,并返回匹配所传递的表达式的第一个单一祖先
- 返回包含零个或一个元素的 jQuery 对象
-
语法
$(selector).parents(filter) -
参数
参数 必需的 描述 filter 否 规定缩小搜索祖先元素范围的选择器表达式。注意:如需返回多个祖先,请使用逗号分隔每个表达式。 -
实例
下例演示了返回所有<span>元素的所有祖先元素:
尝试一下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎来到蝴蝶教程</title> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> //此版本是百度cdn 1.11.1,当然你可以使用更高的版本,从2.0版本以上的是不支持ie6-8的 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function () { $("span").parents().css({ "color": "red", "border": "2px solid red" }); }); </script> </head> <body class="ancestors">body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html>
-
相关方法
- parent() - 返回被选元素的直接父元素
- parentsUntil()- 返回两个给定参数之间的所有祖先元素
-