上期我们讲了遍历的祖先和后代的问题，现在我们讲讲遍历同胞
同胞拥有相同的父元素。 通过 jquery，您能够在 dom 树中遍历元素的同胞元素。
jquery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回所有同胞元素：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <style>
6 .siblings *
7 {
8 display: block;
9 border: 2px solid lightgrey;
10 color: lightgrey;
11 padding: 5px;
12 margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19 $("h2").siblings().css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24
25 <div>div (父元素)
26 <p>p</p>
27 <span>span</span>
28 <h2>h2</h2>
29 <h3>h3</h3>
30 <p>p</p>
31 </div>
32
33 </body>
34 </html>
jquery next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回h2的下一个同胞元素：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <style>
6 .siblings *
7 {
8 display: block;
9 border: 2px solid lightgrey;
10 color: lightgrey;
11 padding: 5px;
12 margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19 $("h2").next().css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24
25 <div>div (父元素)
26 <p>p</p>
27 <span>span</span>
28 <h2>h2</h2>
29 <h3>h3</h3>
30 <p>p</p>
31 </div>
32
33 </body>
34 </html>
jquery nextall() 方法
nextall() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回h2的所有跟随的同胞元素：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <style>
6 .siblings *
7 {
8 display: block;
9 border: 2px solid lightgrey;
10 color: lightgrey;
11 padding: 5px;
12 margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19 $("h2").nextall().css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24
25 <div>div (父元素)
26 <p>p</p>
27 <span>span</span>
28 <h2>h2</h2>
29 <h3>h3</h3>
30 <p>p</p>
31 </div>
32
33 </body>
34 </html>
jquery nextuntil() 方法
nextuntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于h2与h6元素之间的所有同胞元素：
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <style>
6 .siblings *
7 {
8 display: block;
9 border: 2px solid lightgrey;
10 color: lightgrey;
11 padding: 5px;
12 margin: 15px;
13 }
14 </style>
15 <script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19 $("h2").nextuntil("h6").css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body class="siblings">
24
25 <div>div (父元素)
26 <p>p</p>
27 <span>span</span>
28 <h2>h2</h2>
29 <h3>h3</h3>
30 <h4>h4</h4>
31 <h5>h5</h5>
32 <h6>h6</h6>
33 <p>p</p>
34 </div>
35
36 </body>
37 </html>
prev(), prevall() 以及 prevuntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素(在 dom 树中沿着同胞元素向后遍历，而不是向前)。
