jQuery traverse (2)

　　The period we are talking about the problem of traversing ancestors and descendants, and now we talk about traverse compatriots

　　Compatriots have the same parent element. By jQuery, you are able to traverse the element's compatriots in the DOM tree.

　　jQuery siblings () method

　　siblings () method returns all elements of the selected element compatriots.

　　The following example returns all compatriots elements:

 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 () method

　　next () method returns a fellow next element of the selected element.

　　This method returns only one element.

　　The following example returns the next element h2 of compatriots:

 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 () method

　　nextAll () method returns all elements follow countrymen selected element.

　　The following example returns all compatriots to follow the h2 elements:

 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 () method

　　nextUntil () method returns the sibling element interposed between all follow the two given parameters.

　　The following example returns all fellow elements interposed between elements h6 and 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").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>

　　Work prev (), prevAll () and prevUntil () method and a method similar to the above, except that only the opposite direction: they return fellow front element (fellow traverse backward along element in the DOM tree instead of forward).

Guess you like