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

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

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

nextメソッド

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

使用例

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

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

nextAllメソッド

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

使用例

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

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

nextUntilメソッド

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

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

使用例

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

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

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

prevメソッド

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

使用例

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

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

prevAllメソッド

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

使用例

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

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

prevUntilメソッド

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

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

使用例

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

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

すべての兄弟要素を指定する場合

siblingsメソッド

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

使用例

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

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

セレクタを指定して要素を取得する場合

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

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

nextAllメソッドでの使用例

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

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

まとめ

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

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

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。