【jQuery】next()で指定した要素の次の兄弟要素を対象にする!

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

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

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

また、nextAll()を使用することで指定した要素以降の兄弟要素を全て対象にすることができます。

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

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

⚫︎ next()を複数繋げて使用する場合

⚫︎ 指定した要素以降の兄弟要素を全て対象にする方法

ハルトさん

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

さとみさん

はい!
お願いします!

next()とは

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

next()の書き方

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

パラメータ

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

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

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

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

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

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

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

sample.html

style.css

index.js

出力結果

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

さとみさん

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

ハルトさん

そうですね。
next()は指定したセレクタの要素の直下の要素のみを対象にします。
その為、絞りこみたいセレクタが複数あったとしても指定したセレクタの要素の直下にある要素のみを対象とします。

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

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

sample.html

style.css

index.js

出力結果

next()メソッドをパラメータ無しで使用することで、指定した要素の直後の兄弟要素を対象にすることができます。
その為、ボタンを押すと、フライテック1の下に「フライテック0」が表示され、フライテック2の要素の背景色が変更されます。

さとみさん

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

ハルトさん

そうですね。
next()メソッドをパラメータ無しで使用するということは条件を設定しないで使用することになります。
つまり、next()メソッドそのままの動きが実行されます。

next()を複数繋げて使用する場合

next()を複数繋げて使用することで繋げて使用した位置の兄弟要素が対象になります。

sample.html

style.css

index.js

出力結果

next()メソッドを複数繋げて使用することで、指定した要素から繋げて使用した回数分の兄弟要素を対象にすることができます。
その為、ボタンを押すと、フライテック13の要素の背景色が変更され、フライテック10-1の下に「テキスト追加」が表示されます。

指定した要素以降の兄弟要素を全て対象にする方法

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

sample.html

style.css

index.js

出力結果

nextAll()を使用することで指定した要素以降の兄弟要素を全て対象にすることができます。
その為、ボタンを押すとsample1クラス以降の要素の背景色が変更されます。

nexaAll()メソッドについて詳しく知りたい場合はこちらをご参考ください。

今回のポイント

next()で指定要素の次の兄弟要素を対象

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

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

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

⚫︎ next()メソッドを複数繋げて使用すると、指定した要素から繋げて使用した回数分の兄弟要素を対象にすることができる

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

関連記事

jQueryのprev()で指定した要素の前の兄弟要素を対象にする方法についてはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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