【jQuery】nextAll()で指定した要素の後の兄弟要素を全て対象にする!

指定した要素の後の兄弟要素を全て対象にするにはjQueryでnextAll()を使用します。

nextAll()とは指定したセレクタの要素の兄弟要素を全て取得し、指定したセレクタの要素と同じ階層にある要素を全て取得することができるメソッドとなります。

そして、nextAll()にパラメータに縛り込むセレクタを指定して使用すると、そのセレクタに一致する同じ階層にある兄弟要素を全て取得することができ、パラメータ無しで使用すると指定した要素の兄弟要素を全て取得することができます。

しかし、そのセレクタに一致する同じ階層にある兄弟要素に子要素が存在する場合はその子要素を取得することができませんので注意してください。
あくまで同じ階層にある要素が対象となります。

今回は、jQueryのnextAll()を使って指定した要素の後の兄弟要素を全て対象にする方法について以下の内容で解説していきます。

⚫︎ セレクタに一致する要素の兄弟要素を全て対象にする場合
⚫︎ 指定した要素の兄弟要素を全て対象にする場合

ハルトさん

今回はjQueryのnextAll()を使用して指定した要素の後の兄弟要素を全て対象にする方法について説明していきます。

さとみさん

はい!
お願いします!

nextAll()とは

nextAll()とはマッチした要素の各要素の兄弟要素を全て取得するメソッドとなります。

nextAll()の書き方

nextAll()の書き方は下記となります。

パラメータ

⚫︎ 絞りこみたいセレクタ:
更に絞り込みたいセレクタを指定する

nextAll()のパラメータに絞りこみたいセレクタを指定することで、そのセレクタに一致する兄弟要素を全て対象にすることができます。
また、nextAll()をパラメータ無しで使用することでマッチした要素の各要素の兄弟要素を全て取得することができます。

兄弟要素であることからセレクタで取得した要素と同じ階層にある要素を対象としますので注意してください。

指定した要素の後の兄弟要素を全て対象にするサンプルコード

nextAll()で指定した要素の後の兄弟要素を全て対象にするサンプルコードを紹介します。

セレクタに一致する要素の兄弟要素を全て対象にする場合

セレクタに一致する要素の兄弟要素を全て対象にする場合はnextAll()のパラメータに絞りこみたいセレクタを指定します。

sample.html

style.css

index.js

出力結果

nextAll()メソッドのパラメータに絞りこみたいセレクタを指定することでセレクタに一致する要素の兄弟要素を全て対象にすることができます。
そのため、ボタンを押すと、sample0とsample1クラスの全ての要素の背景色が変更されます。

さとみさん

nextAll()のパラメータに絞りこみたいセレクタを指定することでセレクタに一致する兄弟要素を全て対象にしていますね!

ハルトさん

そうですね。
next()の場合だと指定したセレクタの直下の要素のみを対象しますが、nextAll()はセレクタに一致する兄弟要素を全てを対象にします。

指定した要素の兄弟要素を全て対象にする場合

指定した要素の兄弟要素を全て対象にする場合はnextAll()メソッドをパラメータ無しで使用します。

sample.html

style.css

index.js

出力結果

nextAll()メソッドをパラメータ無しで使用することで、指定した要素の兄弟要素を全て対象にすることができます。
しかし、同じ階層にある兄弟要素に子要素が存在する場合はその子要素は対象に入りません。
その為、ボタンを押すと、全ての要素が「フライテック0」に変更されますが、背景色は同じ階層の要素のみ変更されます。

さとみさん

nextAll()メソッドをパラメータ無しでい使用すると指定したセレクタの兄弟要素を全て対象にするんですね!

ハルトさん

そうですね。
しかし、兄弟要素に子要素が存在する場合はその子要素を取得することができません。
あくまで同じ階層にある要素が対象となります。

今回のポイント

nextAll()で指定した要素の後の兄弟要素を全て対象

⚫︎ 指定した要素の後の兄弟要素を全て対象にするにはjQueryのnextAll()メソッドを使用する

⚫︎ セレクタに一致する要素の兄弟要素を全て対象にする場合はnextAll()メソッドのパラメータに絞りこみたいセレクタを指定する

⚫︎ 指定した要素の兄弟要素を全て対象にする場合はnextAll()メソッドをパラメータ無しで使用する

⚫︎ nextAll()メソッドで兄弟要素に子要素が存在する要素に使用する場合、その子要素は対象にならない

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し