jQuery 遍历，用于根据所要查找的元素相对于其他元素的关系来查找到该元素。
jQuery 提供了一系列的方法来向上遍历 DOM 树，以便查找到所选元素的祖先元素（父元素、祖父元素等）。
parent()
| 方法 | 描述 |
|---|---|
| parent() | 返回所选元素的直接父元素，只会向上一级对 DOM 树进行遍历。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历01_祖先01_parent()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
* {
margin: auto;
padding: 5px;
border: 5px solid lightgray;
color: darkgray;
}
#div1 {
width: 400px;
height: 400px;
}
#div11 {
width: 300px;
height: 300px;
}
#p1 {
width: 200px;
height: 200px;
}
#s1 {
display: block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>body（曾曾祖父元素）
<div id="div1">div（曾祖父元素）
<div id="div11">div（祖父元素）
<p id="p1">p（父元素）
<span id="s1">span</span>
</p>
</div>
</div>
<script>
$(function () {
$("#s1").parent().css("border", "5px solid red");
});
</script>
</body>
</html>
效果演示：
parent().png
parents(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 可选。参数为空则返回所选元素的所有祖先元素，一路向上直到文档的根元素 (<html>)；非空则返回所选元素的所有祖先元素中与选择器匹配的元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历01_祖先02_parents()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
* {
margin: auto;
padding: 5px;
border: 5px solid lightgray;
color: darkgray;
}
#div1 {
width: 400px;
height: 400px;
}
#div11 {
width: 300px;
height: 300px;
}
#p1 {
width: 200px;
height: 200px;
}
#s1 {
display: block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>body（曾曾祖父元素）
<div id="div1">div（曾祖父元素）
<div id="div11">div（祖父元素）
<p id="p1">p（父元素）
<span id="s1">span</span>
</p>
</div>
</div>
<script>
$(function () {
$("#s1").parents().css("border", "5px solid red");
});
</script>
</body>
</html>
效果演示：
parents(selector).png
closest(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 必选。返回所选元素第一个匹配的祖先元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历01_祖先03_closest()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
* {
margin: auto;
padding: 5px;
border: 5px solid lightgray;
color: darkgray;
}
#div11 {
width: 400px;
height: 400px;
}
#div12 {
width: 300px;
height: 300px;
}
#p1 {
width: 200px;
height: 200px;
}
#s1 {
display: block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>body（曾曾祖父元素）
<div class="div1" id="div11">div（曾祖父元素）
<div class="div1" id="div12">div（祖父元素）
<p id="p1">p（父元素）
<span id="s1">span</span>
</p>
</div>
</div>
<script>
$(function () {
$("#s1").closest(".div1").css("border", "5px solid red");
});
</script>
</body>
</html>
效果演示：
closest(selector).png
网友评论