jQuery - 遍历（三）之 同胞
2016-08-07 本文已影响17人
AshengTan
jQuery 遍历，用于根据所要查找的元素相对于其他元素的关系来查找到该元素。
jQuery 提供了一系列的方法来水平遍历 DOM 树，以便查找到所选元素的同胞元素。
prev()
| 方法 | 描述 |
|---|---|
| prev() | 返回所选元素的前一个同级元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历03_同胞01_prev()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li id="li3">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("#li3").prev().css("color", "red");
});
</script>
</body>
</html>
效果演示：
prev().png
prevAll(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 可选。参数为空则返回所选元素之前的所有同级元素；非空则返回所选元素之前的所有同级元素中与选择器匹配的元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历03_同胞02_prevAll()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li id="li3">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("#li3").prevAll().css("color", "red");
});
</script>
</body>
</html>
效果演示：
prevAll(selector).png
next()
| 方法 | 描述 |
|---|---|
| prev() | 返回所选元素的后一个同级元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历03_同胞03_next()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li id="li3">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("#li3").next().css("color", "red");
});
</script>
</body>
</html>
效果演示：
next().png
nextAll(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 可选。参数为空则返回所选元素之后的所有同级元素；非空则返回所选元素之后的所有同级元素中与选择器匹配的元素。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历03_同胞04_nextAll()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li id="li3">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("#li3").nextAll().css("color", "red");
});
</script>
</body>
</html>
效果演示：
nextAll(selector).png
siblings(selector)
| 参数 | 类型 | 描述 |
|---|---|---|
| selector | String | 可选。参数为空则返回所选元素的所有同级元素（所选元素本身除外）；非空则返回所选元素的所有同级元素中与选择器匹配的元素（所选元素本身除外）。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>遍历03_同胞05_siblings()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
</style>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li id="li3">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$(function () {
$("#li3").siblings().css("color", "red");
});
</script>
</body>
</html>
效果演示：
siblings(selector).png
