jQuery domツリーに横行する方法覚えてる?

DOMツリーを横断する
DOMツリーには、横方向に遍歴できる有用なjQueryメソッドがたくさんあります.

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

jQuery siblings()メソッド
Siblings()メソッドは、選択した要素のすべての兄弟要素を返します.
次の例では、すべての兄弟要素を返します.

    
  
  
    $(document).ready(function () {
      $("h2").siblings().css({
        "color": "red",
        "border": "2px solid red"
      });
    });
  



  
div (   )
    
p
    span
    
h2
    
h3
    
p
  

jQuery next()メソッド
next()メソッドは、選択した要素の次の兄弟要素を返します.
次の例では、次の兄弟を返します.

  
 
  <script>
    $(document).ready(function () {
      $("h2").next().css({
        "color": "red",
        "border": "2px solid red"
      });
    });
  


  
div (   )
    
p
    span
    
h2
    
h3
    
p
  

jQuery nextall()メソッド
nextall()メソッドは、選択した要素の次の兄弟要素をすべて返します.
次の例では、次の兄弟要素をすべて返します.

  
 
  <script>
    $(document).ready(function () {
      $("h2").nextAll().css({
        "color": "red",
        "border": "2px solid red"
      });
    });
  


  
div (   )
    
p
    span
    
h2
    
h3
    
p
  

jQuery nextUntil()メソッド
nextuntil()メソッドは、2つの与えられたパラメータ間のすべての次の兄弟要素を返します.
次の例では、要素との間のすべての兄弟要素を返します.

  
 
  <script>
    $(document).ready(function () {
      $("h2").nextUntil("h6").css({
        "color": "red",
        "border": "2px solid red"
      });
    });
  


  
div (   )
    
p
    span
    
h2
    
h3
    
h4
    
h5
    
h6
    
p
  

オンラインで試してもいいです
jQuery prev()、prevAll()&prevUntil()メソッド
prev()、prevAll()およびprevUntil()メソッドの動作は、上記の方法と似ていますが、機能は逆です.これらは、前の兄弟要素を返します(DOMツリーの兄弟要素に沿って前に遍歴するのではなく、後ろに遍歴します).
より良いjQueryチュートリアル