直接看图：
遍历-祖先
parent():返回被选元素的父级
parents()：返回被选元素的所有祖先元素
parentsUntil()：返回介于两个给定元素之间的所有元素
祖先 = 父亲、祖父、曾祖父
这些方法用于向上遍历DOM
parent():以p元素为中心，向上取父元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery祖先</title> <script src="../jquery-3.6.0.js"></script> <style> body { color: #fff; } .container * { display: block; border: 1px solid black; color: white; padding: 5px; margin: 15px; } .container div{ background-color: #333; } ul{ background-color: #555; } ul li { background-color: #777; } p{ background-color: #999; } </style> </head> <body> <div class="container" style="width: 300px;"> <div>div曾祖父元素 <ul>ul祖父元素 <li>li父元素 <p>p孩子</p> </li> </ul> </div> </div> <script> $(function () { $('p').parent().css({ //使用parent()方法获取p元素的父级 'border': "1px solid red", 'color': "red", 'background-color':'white' }) }) </script> </body> </html>
parents()：返回p元素以外的所有的祖先元素
$(function () { $('p').parents().css({ //使用parents()方法获取p元素的所有祖先 'border': "1px solid red", 'color': "red", 'background-color':'white' }) })
parentsUntil() 方法
获取两个给定元素的之间的祖先元素
例如：获取div元素到p元素之间的所有祖先元素
$(function () { $('p').parentsUntil('div').css({ //使用parentsUntil()方法获取两者之间的祖先元素 'border': "1px solid red", 'color': "red", 'background-color':'white' }) })
