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

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

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

prev()にパラメータに縛り込むセレクタを指定して使用すると、そのセレクタに一致する同じ階層にある兄弟要素を取得することができ、一致しない場合は何も取得しなくなります。

そして、パラメータ無しで使用すると指定した要素の直前の兄弟要素を取得することができます。

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

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

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

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

ハルトさん

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

さとみさん

はい!
お願いします!

prev()とは

prev()とは指定した要素の直前の兄弟要素を取得するメソッドとなります。

prev()の書き方

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

パラメータ

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

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

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

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

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

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

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

group.html

style.css

index.js

出力結果

prev()メソッドのパラメータに絞りこみたいセレクタを指定することでセレクタに一致する要素の直前の兄弟要素を対象にすることができます。
そのため、btnAクラスのボタンを押すと、p要素の色が変化し、btnBクラスのボタンを押すと、group0クラスの2番目の要素の透過度が変更されます。

さとみさん

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

ハルトさん

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

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

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

group.html

style.css

index.js

出力結果

prev()メソッドをパラメータ無しで使用することで、指定した要素の直前の兄弟要素を対象にすることができます。
その為、btnAクラスのボタンを押すと、textAクラスの要素の上に「案件紹介のサイトZ」が表示され、btnBクラスのボタンを押すと、groupBクラスの要素の背景色が変更されます。

指定した要素より前の兄弟要素を全て対象にする方法

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

group.html

style.css

index.js

出力結果

prevAll()を使用することで指定した要素より前の兄弟要素を全て対象にすることができます。
その為、btnAクラスのボタンを押すとtextAクラスより前の全ての要素にテキストが追加され、btnBクラスのボタンを押すとgroup3クラスより前の要素の背景色が変更されます。

今回のポイント

prev()で指定要素の前の兄弟要素を対象

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

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

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

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

関連記事

jQueryのnext()メソッドで要素の次の兄弟要素を対象にする方法にはこちらをご参考ください。

Writer
壷井

壷井

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

最新の案件情報

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