jQuery 怎么获取父亲节点? 下面本篇文章给大家介绍一下使用 jQuery 获取父亲节点的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 jQuery 中, 可以使用 parent() 方法或 parents() 方法来获取父亲节点. parent() 方法返回被选元素的直接父节点; parents() 方法返回被选元素的所有父节点.
parent() 方法
parent() 方法返回被选元素的直接父元素.
DOM 树: 该方法只沿着 DOM 树向上遍历单一层级.
示例:
- <!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").parent().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>
效果图:
parents() 方法
parents() 方法返回被选元素的所有祖先元素.
祖先是父, 祖父, 曾祖父, 依此类推.
DOM 树: 该方法从父元素向上遍历 DOM 元素的祖先, 直至文档根元素的所有路径 (<HTML>).
示例:
- <!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>
效果图:
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/18225.html