jQuery 遍历 - offsetParent() 方法 概述
jQuery 2022-06-01 17:59:3914小码哥的IT人生shichen
jQuery 遍历 - offsetParent() 方法
实例
设置类名为 item-a 的 li 元素的最近定位父元素的背景色：
$('li.item-a').offsetParent().css('background-color', 'red');完整实例：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii" style="position: relative;">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> <script> $('li.item-a').offsetParent().css('background-color', 'red'); </script> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
offsetParent() 获得被定位的最近祖先元素。
语法
.offsetParent()详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先，并构造一个由最近的定位祖先元素包围的 jQuery 对象。定位元素指的是，元素的 CSS position 属性设置为 relative、absolute 或 fixed。在为表演动画计算偏移或在页面上放置对象时，该信息会很有用处。
请思考带有基本嵌套列表的页面，其中带有定位元素：
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii" style="position: relative;">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul>
如果我们从项目 A 开始，我们可以找到其定位祖先元素：
$('li.item-a').offsetParent().css('background-color', 'red');完整实例：
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii" style="position: relative;">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> <script> $('li.item-a').offsetParent().css('background-color', 'red'); </script> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这会改变被定位的项目 II 的背景色。
