jQuery 祖先元素
使用 jQuery，您可以遍历 DOM 树来查找元素的祖先。
祖先是父、祖父、曾祖父等等。
向上遍历 DOM 树
下面是 3 种用于遍历 DOM 树的有用 jQuery 方法:
parent()parents()parentsUntil()
jQuery parent() 方法
parent() 方法返回所选元素的直接父元素。
此方法只遍历 DOM 树上的一个级别。
下面的实例返回每个 <span> 元素的直接父元素:
实例
<!DOCTYPE html><html><head><style>.ancestors * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("span").parent().css({"color": "red", "border": "2px solid red"});});</script></head><body><div class="ancestors"><div style="width:500px;">div (曾祖级)<ul>ul (祖父级)<li>li (直接父级)<span>span</span></li></ul></div><div style="width:500px;">div (祖父级)<p>p (直接父级)<span>span</span></p></div></div></body></html>
jQuery parents() 方法
parents() 方法返回所选元素的所有祖先元素，一直到文档的根元素（<html>）。
下面的实例返回所有 <span> 元素的所有祖先:
实例
<!DOCTYPE html><html><head><style>.ancestors * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/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>
还可以使用可选参数筛选祖先搜索。
下面的实例返回所有 <span> 元素的所有祖先，这些元素都是 <ul> 元素:
实例
<!DOCTYPE html><html><head><style>.ancestors * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/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>
jQuery parentsUntil() 方法
parentsUntil() 方法返回两个给定参数之间的所有祖先元素。
下面的实例返回 <span> 和 <div> 元素之间的所有祖先元素:
实例
<!DOCTYPE html><html><head><style>.ancestors * {display: block;border: 2px solid lightgrey;color: lightgrey;padding: 5px;margin: 15px;}</style><script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function(){$("span").parentsUntil("div").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>
jQuery 遍历参考
有关所有 jQuery 遍历方法的完整概述，请访问本站的 jQuery 遍历参考。