jQuery 遍歷饺鹃，用于根據(jù)所要查找的元素相對于其他元素的關系來查找到該元素。
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)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| selector | String | 可選痴脾。參數(shù)為空則返回所選元素之前的所有同級元素；非空則返回所選元素之前的所有同級元素中與選擇器匹配的元素梳星。 |
代碼：
<!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)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| selector | String | 可選前域。參數(shù)為空則返回所選元素之后的所有同級元素；非空則返回所選元素之后的所有同級元素中與選擇器匹配的元素话侄。 |
代碼：
<!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)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| selector | String | 可選学赛。參數(shù)為空則返回所選元素的所有同級元素（所選元素本身除外）；非空則返回所選元素的所有同級元素中與選擇器匹配的元素（所選元素本身除外）盏浇。 |
代碼：
<!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
