【jQuery】兄弟要素を指定するメソッドまとめ｜next()、prev()、siblings()など

今回は、jQueryで個人的によく使用する兄弟要素（同じ階層にある要素）を指定するメソッドのまとめです。

以降にある兄弟要素を指定する場合

nextメソッドは、オブジェクトで指定した要素の直後にある、兄弟要素を取得します。

<div class='items'></div>の直後の兄弟要素を、赤色のテキストカラーにする場合。

$('div.items').next().css('color', 'red');

nextAllメソッドは、オブジェクトで指定した要素以降にある、すべての兄弟要素を取得します。

<div class='items'></div>以降にあるすべての兄弟要素を、赤色のテキストカラーにする場合。

$('div.items').nextAll().css('color', 'red');

nextUntilメソッドは、オブジェクトで指定した要素の直後から、引数で指定した要素の前までにある兄弟要素を取得します。

引数を省略した場合は、オブジェクトで指定した要素以降にあるすべての兄弟要素を取得します。

<div class='items'></div>の直後から、classの値がselectの要素の前までにある兄弟要素を赤色のテキストカラーにする場合。

$('div.items').nextUntil('.select').css('color', 'red');

prevメソッドは、オブジェクトで指定した要素の直前にある、兄弟要素を取得します。

<div class='items'></div>の直前の兄弟要素を、赤色のテキストカラーにする場合。

$('div.items').prev().css('color', 'red');

prevAllメソッドは、オブジェクトで指定した要素の前にある、すべての兄弟要素を取得します。

<div class='items'></div>の前にあるすべての兄弟要素を、赤色のテキストカラーにする場合。

$('div.items').prevAll().css('color', 'red');

prevUntilメソッドは、オブジェクトで指定した要素の直前から、引数で指定した要素の前までにある兄弟要素を取得します。

引数を省略した場合は、前にあるすべての兄弟要素を取得します。

<div class='items'></div>の直前から、classの値がselectの要素の前までにある兄弟要素を赤色のテキストカラーにする場合。

$('div.items').prevUntil('.select').css('color', 'red');

siblingsメソッドは、オブジェクトで指定した要素のすべての兄弟要素を取得します。

<div class='items'></div>のすべての兄弟要素を、赤色のテキストカラーにする場合。

$('div.items').siblings().css('color', 'red');

今回紹介した兄弟要素を指定するメソッドでは、引数にセレクタを指定することで選択する要素を絞ることができます。

また、nextUntil、prevUntilメソッドの場合は、第2引数に要素を絞るセレクタを指定できます。

<div class='items'></div>以降にあるすべての兄弟要素の中で、classの値がselectの要素のみを赤色のテキストカラーにする場合。

$('div.items').nextAll('.select').css('color', 'red');

以上が、jQueryで個人的によく使用する兄弟要素を指定するメソッドまとめとなります。

今回紹介したメソッドの詳細や、要素を指定するその他メソッドについては、以下の参考サイトを確認してみてください。