第21章 jQueryのトラバース - 兄弟
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
homepage
# jQueryのトラバース - 兄弟 *** jQueryを使えば、DOMツリー内を横にたどって要素の兄弟を見つけることができます。 兄弟は同じ親を共有します。 ## 1.DOMツリーを横に横切る DOMツリーを横にたどるのに便利なjQueryメソッドはたくさんあります。 * siblings() * next() * nextAll() * nextUntil() * prev() * prevAll() * prevUntil() ## **2.siblings()メソッド** この`siblings()`メソッドは、選択した要素のすべての兄弟要素を返します。 次の例は、`<h2>`のすべての兄弟要素を返します。 #### **例** [sample21-1.html] ``` <!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").siblings().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html> ``` #### **実行結果**  兄弟の検索をフィルタリングするためにオプションのパラメータを使用することもできます。 次の例では、`<h2>`そのすべての兄弟要素を要素として返します`<p>` 。 #### **例** [sample21-2.html] ``` <!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").siblings("p").css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html> ``` #### **実行結果**  ## **3.next()メソッド** この`next()`メソッドは、選択された要素の次の兄弟要素を返します。 次の例では、次の兄弟を返します`<h2>`。 #### **例** [sample21-3.html] ``` <!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").next().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html> ``` #### **実行結果**  ## **4.nextAll()メソッド** この`nextAll()`メソッドは、選択した要素の次の兄弟要素をすべて返します。 次の例では、次の兄弟要素をすべて返します `<h2>`。 #### **例** [sample21-4.html] ``` <!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").nextAll().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html> ``` #### **実行結果**  ## **5.nextUntil()メソッド** この`nextUntil()`メソッドは、与えられた2つの引数の間にあるすべての次の兄弟要素を返します。 次の例では、a `<h2>`と要素の間にあるすべての兄弟要素を返します`<h6>`。 #### **例** [sample21-5.html] ``` <!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <p>p</p> </div> </body> </html> ``` #### **実行結果**  ## **6.prev()、prevAll()、およびprevUntil()メソッド** `prev()`、`prevAll()`および`prevUntil()`方法は、ちょうど上記のが、逆の機能を持つメソッドのように動作します。彼らは、（代わりに、前方の、DOMツリー内の兄弟要素に沿って後方トラバース）前の兄弟要素を返します。
content
戻る
