jQuery 获取父元素方法比较多, 比如 parent(),parents(),closest() 这些都能帮你实现查找父元素或节点, 下面我们来一一讲解. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
parent()
parent() 方法返回被选元素的直接父元素.
示例:
- <!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("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>
- <li>
- li (直接父节点)
- <span>
- span
- </span>
- </li>
- </ul>
- </div>
- </body>
- </HTML>
效果图:
parents()
parents() 方法不仅返回父元素, 还返回被选元素的所有祖先元素.
如果将标记指定为参数, 则获取与该参数匹配的所有元素.
示例:
- <!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>
效果图:
closest()
closest() 方法返回被选元素的第一个祖先元素.
如果要将特定样式应用于某个父元素可以使用 closest().
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- </head>
- <body style="text-align:center;">
- <p style="font-size: 17px; font-weight: bold;">
- 点击按钮, 查看结果
- </p>
- <div class="parent">
- <div class="child">
- </div>
- </div>
- <button>
- 点击
- </button>
- <p id="DOWN" style="color: green; font-size: 24px; font-weight: bold;">
- </p>
- <script src="https://code.jquery.com/jquery-3.3.1.min.js">
- </script>
- <script>
- $('button').on('click',
- function() {
- var object = $('.child').closest('.parent');
- if (object.length) {
- $('#DOWN').text("className ='.child'" + ",parentName = '.parent'");
- } else {
- $('#DOWN').text("不存在父类");
- }
- });
- </script>
- </body>
- </HTML>
效果图:
closest 和 parents 的主要区别是:
parents()
从父元素开始
沿 DOM 树向上遍历, 并返回匹配所传递的表达式的所有祖先
返回包含零个, 一个或多个元素的 jQuery 对象
closest()
从当前元素开始
沿 DOM 树向上遍历, 并返回匹配所传递的表达式的第一个祖先
返回包含零个或一个元素的 jQuery 对象
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17979.html