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

今回は、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引数に要素を絞るセレクタを指定できます。

.nextAll()での使用例

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

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

 

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

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

参考サイト、参考書籍

コメントまたはTwitterで返信

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