jQuery 遍歴 - 兄弟(siblings)

jQueryを使用して、DOMツリー内で横方向に簡単に遍歴し、要素の同級を検索することができます。

兄弟要素は同じ親要素を共有する要素です。

この章では、DOMツリー内での横方向の遍歴方法を説明します。

DOMツリー内での横方向の遍歴

以下のjQueryメソッドを使用してDOMツリー内での横方向の遍歴を行います：

• siblings()

• next()

• nextAll()

• nextUntil()

• prev()

• prevAll()

• prevUntil()

この章では、各メソッドを使用する方法を説明します。

jQuery siblings()メソッド

jQuery siblings()メソッドは選択された要素のすべての同級要素を返します。

以下の例では、クラス名が「middle」の各<li>要素のすべての同級要素を返します：

$(document).ready(function(){
　　$("li.middle").siblings().css("background"-color", "lightgreen");
});

オプションの引数を使用して、同級の検索をフィルタリングすることもできます。

以下の例では、各リストアイテムのクラスが「bold」のすべての同級要素を返します：

$(document).ready(function(){
　　$("li").siblings(".bold").css("background"-color", "lightgreen");
});

jQuery next()メソッド

jQuery next()メソッドは選択された要素の直後にいる次の同級要素を返します。

以下の例では、各DIV要素の次の同級要素を返します：

$(document).ready(function(){
　　$("div").next().css("background", "lightblue");
});

jQuery nextAll()メソッド

jQuery nextAll()メソッドは選択された要素のすべての次の同級要素を返します。

以下の例では、各DIV要素のすべての次の同級要素を返します：

$(document).ready(function(){
　　$("div").nextAll().css("background", "lightblue");
});

jQuery prev()メソッド

jQuery prev()メソッドは選択された要素の直前にいる兄弟要素を返します。

以下の例では、各DIV要素の前の同級要素を返します：

$(document).ready(function(){
　　$("div").prev().css("background", "lightblue");
});

jQuery prevAll()メソッド

jQuery prevAll()メソッドは選択された要素のすべての前の同級要素を返します。

以下の例では、各DIV要素のすべての前の同級要素を返します：

$(document).ready(function(){
　　$("div").prevAll().css("background", "lightblue");
});

jQueryのnextUntil()とprevUntil()メソッド

jQuery nextUntil()このメソッドは、2つの指定されたパラメータ間のすべての次の同級要素を返します。

jQuery prevUntil()このメソッドは、2つの指定されたパラメータ間のすべての前の同級要素を返します。

以下の例では、<dt id="term-2">次の<dt>までのすべての次の同級要素：

$(document).ready(function(){
　　$("#term-2").nextUntil("dt").css("background-color",　"coral");
});

以下の例では、<dt id="term-2">前のすべての兄弟、および前の<dt>まで：

$(document).ready(function(){
　　$("#term-2").prevUntil("dt").css("background-color",　"coral");
});

jQueryの遍历リファレンス

完全な遍历メソッドの詳細については、以下のページを訪れてくださいjQueryの遍历リファレンス。