jQuery入門 | 要素の探索 | 兄弟要素の探索 .siblings() .next() .prev()

DOMツリーで特定要素の兄弟要素、つまり同じ階層にある要素を選択するためのメソッドは次のとおりである。

メソッド	説明
.siblings()	選択した要素の兄弟要素のうち、指定したセレクターに該当する要素をすべて選択する。
.next()	選択した要素の直後に位置する兄弟要素を選択する。
.nextAll()	選択した要素の後に位置する兄弟要素をすべて選択する。
.nextUntil()	選択した要素の兄弟要素のうち、指定したセレクターに該当する要素の直前までの要素をすべて選択する。
.prev()	選択した要素の直前に位置する兄弟要素を選択する。
.prevAll()	選択した要素の前に位置する兄弟要素をすべて選択する。
.prevUntil()	選択した要素の兄弟要素のうち、指定したセレクターに該当する要素の直後までの要素をすべて選択する。

`.siblings()`メソッド

.siblings()メソッドは、選択した要素の兄弟要素のうち、指定したセレクターに該当する要素をすべて選択する。

次のようなHTML要素があるとき、

<ul>ul（親）
  <li>li（兄弟）</li>
  <li>li（兄弟）</li>
  <li class="me">li（自分）</li>
  <li>li（兄弟）</li>
  <li>li（兄弟）</li>
</ul>

meクラスを持つ要素と同じ階層にある要素をすべて選択し、その要素のCSSスタイルを変更する。

$(".me").siblings().css({"border": "2px solid red"});

.next()メソッドは、選択した要素の直後に位置する兄弟要素を選択する。

meクラスを持つ要素の直後の兄弟要素を1つ選択し、その要素のCSSスタイルを変更する。

$(".me").next().css({"border": "2px solid red"});

.nextAll()メソッドは、選択した要素の後に位置する兄弟要素をすべて選択する。このとき、セレクターを引数として渡すことで、渡されたセレクターに該当する兄弟要素だけを選択することもできる。

meクラスを持つ要素の後にある兄弟要素をすべて選択し、その要素のCSSスタイルを変更する。

$(".me").nextAll().css({"border": "2px solid red"});

.nextUntil()メソッドは、選択した要素の兄弟要素のうち、渡されたセレクターに該当する要素の直前までの要素だけをすべて選択する。このとき、セレクターを引数として渡さなければ、.nextAll()メソッドと同じように、選択した要素の後に位置する兄弟要素をすべて選択する。

meクラスを持つ要素の後続兄弟要素のうち、最後の<li>要素の直前までのすべての要素を選択し、その要素のCSSスタイルを変更する。

$(".me").nextUntil("li:last").css({"border": "2px solid red"});

.prev()メソッドは、.next()メソッドとは反対方向に要素を選択する。

meクラスを持つ要素の直前の兄弟要素を1つ選択し、その要素のCSSスタイルを変更する。

$(".me").prev().css({"border": "2px solid red"});

.prevAll()メソッドは、.nextAll()メソッドとは反対方向に要素を選択する。

meクラスを持つ要素の前にある兄弟要素をすべて選択し、その要素のCSSスタイルを変更する。

$(".me").prevAll().css({"border": "2px solid red"});

.prevUntil()メソッドは、.nextUntil()メソッドとは反対方向に要素を選択する。

meクラスを持つ要素の前の兄弟要素のうち、最初の<li>要素の直前までのすべての要素を選択し、その要素のCSSスタイルを変更する。

$(".me").prevUntil("li:first").css({"border": "2px solid red"});