直接看图：
遍历-祖先
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'
})
})