jQuery 中可以获取祖先元素, 可以使用 parents() 方法或 closest() 方法来获取祖先元素.
使用 parents() 方法可以获取被选元素的所有祖先元素, closest() 方法返回被选元素的第一个祖先元素.
祖先是父, 祖父, 曾祖父, 依此类推.
DOM 树:
parents() 方法从父元素向上遍历 DOM 元素的祖先, 直至文档根元素的所有路径 (<html>).
closest() 方法从当前元素向上遍历, 直至文档根元素的所有路径 (<HTML>), 来查找 DOM 元素的第一个祖先元素.
parents() 方法
语法
$(selector).parents(filter)
示例 1: 获取所有祖先元素
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- .ancestors *{ display: block; border: 2px solid lightgrey; color: lightgrey;
- padding: 5px; margin: 15px; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/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>
- <!-- body 元素之前的外部红色的边框, 是 html 元素 (也是一个祖先节点).-->
- </HTML>
示例 2: 返回 <span> 的所有祖先中的 <li> 和 <div> 元素
<!DOCTYPE HTML> <HTML> <head> <meta charset="utf-8"> <style> .ancestors *{ display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("span").parents("div,li").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>
示例 3: 返回 <span> 的所有祖先中的 <ul> 元素
<!DOCTYPE HTML> <HTML> <head> <meta charset="utf-8"> <style> .ancestors *{ display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("span").parents("ul").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>
closest() 方法
语法
返回被选元素的第一个祖先元素:
$(selector).closest(filter)
返回使用 DOM context 查找的 DOM 树中的第一个祖先元素:
$(selector).closest(filter,context)
示例:
<!DOCTYPE HTML> <HTML> <head> <meta charset="utf-8"> <style> .ancestors *{ display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function() { $("span").closest("ul").CSS({ "color": "red", "border": "2px solid red" }); }); </script> </head> <body class="ancestors"> body (曾曾祖先节点) <div style="width:500px;"> div (曾祖先节点) <ul> ul (第二祖先 - 第二祖先节点) <ul> ul (第一祖先 - 第一祖先节点) <li> li (直接父节点) <span> span </span> </li> </ul> </ul> </div> </body> </HTML>
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/18247.html