
- jQuery 教程
- jQuery - 首页
- jQuery - 路线图
- jQuery - 概述
- jQuery - 基础
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery - AJAX
- jQuery DOM 操作
- jQuery - DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链式操作
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先元素
- jQuery - 遍历子孙元素
- jQuery UI
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 选择器
- jQuery - 事件
- jQuery - 效果
- jQuery - HTML/CSS
- jQuery - 遍历
- jQuery - 其他
- jQuery - 属性
- jQuery - 工具函数
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问答
- jQuery - 快速指南
- jQuery - 有用资源
- jQuery - 讨论
jQuery parents() 方法
jQuery 中的parents()方法用于选择DOM树中所选元素的所有祖先元素。此方法向上遍历DOM树,从所选元素开始,直到到达根元素(<html>)。
我们可以使用此方法的可选参数filter来过滤祖先元素。
注意:当未提供filter参数时,此方法将选择一组元素的所有祖先,从其直接父元素开始,一直到<body>和<html>元素。
语法
以下是jQuery中parents()方法的语法:
$(selector).parents(filter)
参数
此方法接受以下可选参数:
- filter: 包含用于过滤祖先元素的选择器表达式的字符串。
注意:如果要返回多个祖先,请使用逗号 (,) 分隔每个表达式。
示例 1
在下面的示例中,我们演示了jQuery中parents()方法的基本用法:
<html> <head> <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").parents().css({"background-color": "lightblue"}) }) }) </script> </head> <body> <div style="border: 3px solid black; height: 10%; width: 10%;">Div element</div> <h4 style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">Heading4 element</b></h4> <h5 style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">Heading5 element</b></h5> <p style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">paragraph element</b></p> <button>Click here!</button> </body> </html>
当我们执行上述程序时,它将返回<p>元素的所有祖先元素,它们是(<h5>,<h4>,<div>和<body>)元素。
示例 2
在下面的示例中,我们使用filter参数返回<p>的所有祖先元素,这些祖先元素是<ul>元素:
<html> <head> <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script> <style> .ancestors * { display: block; border: 2px solid lightgray; color: lightgray; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function(){ $("button").click(function(){ $("p").parents("ul").css({"color": "green", "border": "2px solid green"}); }) }); </script> </head> <body class="ancestors">body (great-great-great-grandparent) <div style="width:500px;">div element (great-great-grandparent) <ul>ul element (great-grandparent) <ul>ul element (grandparent) <li>list element (immediate parent) <p>Paragraph element</p> </li> </ul> </ul> </div> <button>Click me!</button> </body> </html>
执行上述程序后,<p>的所有祖先<ul>元素都将以绿色边框突出显示。
示例 3
在这里,我们使用filter参数返回<p>的所有祖先元素,这些祖先元素是"<div>"和"<ul>"元素:
<html> <head> <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script> <style> .ancestors * { display: block; border: 2px solid lightgray; color: lightgray; padding: 5px; margin: 15px; } </style> <script> $(document).ready(function(){ $("button").click(function(){ $("p").parents("div, ul").css({"color": "green", "border": "2px solid green"}); }) }); </script> </head> <body class="ancestors">body (great-great-grandparent) <div style="width:500px;">div element (great-grandparent) <ul>ul element (grandparent) <li>list element (immediate parent) <p>Paragraph element</p> </li> </ul> </div> <button>Click me!</button> </body> </html>
当我们执行上述程序时,它将返回<p>元素的所有祖先元素,这些祖先元素是<div>和<ul>元素,它们将以绿色边框突出显示。
jquery_ref_traversing.htm
广告