jQuery トラバース - 兄弟

❮ 前章へ 次章へ ❯

兄弟は同じ親を共有します。

jQuery により、要素の兄弟を検索するため、DOM ツリーを横にトラバースすることができます。


DOM ツリーを横にトラバース

DOM ツリーを横にトラバースするための便利な jQuery メソッドがたくさんあります:


jQuery siblings() メソッド

siblings() メソッドは、選択した要素の全ての兄弟要素を返します。

次の例は、<h2> の全兄弟要素を返します:

$(document).ready(function(){
    $("h2").siblings();
});
Try it Yourself »

オプション・パラメータを使用して、兄弟の検索をフィルタリングすることもできます。

次の例は、<h2> の全兄弟要素のうち <p> 要素のみを取得します:

$(document).ready(function(){
    $("h2").siblings("p");
});
Try it Yourself »

jQuery next() メソッド

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

このメソッドは、一つの要素だけを返します。

次の例は、<h2> の次の兄弟を返します:

$(document).ready(function(){
    $("h2").next();
});
Try it Yourself »

jQuery nextAll() メソッド

nextAll() メソッドは、選択した要素の次の全ての兄弟要素を返します。

次の例は、<h2> の次の全ての兄弟を取得します:

$(document).ready(function(){
    $("h2").nextAll();
});
Try it Yourself »

jQuery nextUntil() メソッド

nextUntil() メソッドは、2 つの指定したアーギュメント間にある全ての兄弟要素を返します。

次の例は、<h2> と <h6> 間の全兄弟要素を取得します:

$(document).ready(function(){
    $("h2").nextUntil("h6");
});
Try it Yourself »

jQuery prev()、prevAll() & prevUntil() メソッド

prev()、prevAll()、prevUntil() メソッドは、上記メソッドと同じですが、機能的には逆に動作します: こちらは、前方の兄弟要素を返します


練習問題で確認テスト!

練習問題 1 »  練習問題 2 »  練習問題 3 »  練習問題 4 »  練習問題 5 »  練習問題 6 »


jQuery トラバース・リファレンス

全 jQuery トラバース·メソッドに関する完全な概要については、 jQuery トラバースリファレンスをご覧ください。


❮ 前章へ 次章へ ❯