【jQuery】指定した要素の兄弟要素を取得する方法の一覧!

jQueryで指定した要素の兄弟要素を取得するにはnext()系のメソッドやprev()系のメソッド、slice()メソッド、siblings()メソッドなど様々な方法があります。

また、兄弟要素とは、同じ階層にある要素のことをいい、同じ階層にある要素であるならば、指定した要素よりも前の要素でも後ろの要素でも兄弟要素となります。

その為、指定したセレクタから見て、どこの兄弟要素を取得したいのかを確認してから使い分けるようにしましょう。

今回は、指定した要素の兄弟要素を取得する方法の一覧について以下の内容で解説していきます。

⚫︎ 「~」で兄弟要素を取得する場合

⚫︎ next()で兄弟要素を取得する場合
⚫︎ nextAll()で兄弟要素を取得する場合
⚫︎ nextUtill()で兄弟要素を取得する場合
⚫︎ prev()で兄弟要素を取得する場合
⚫︎ prevAll()で兄弟要素を取得する場合
⚫︎ prevUtill()で兄弟要素を取得する場合
⚫︎ siblings()で兄弟要素を取得する場合
⚫︎ slice()で兄弟要素を取得する場合

兄弟要素とは

兄弟要素とは、指定した要素と同じ階層にある要素をいいます。

例えば、グローバルメニューなどのliタグでメニューの項目を表示していますが、liタグから見て、liタグ内の要素全てが兄弟要素になります。

セレクタ関係で指定した要素の兄弟要素を取得する方法

セレクタ関係で指定した要素の兄弟要素を取得する方法を紹介します。

「~」で兄弟要素を取得する場合

「~」を指定して要素の兄弟要素の取得を行ってみます。

sample.html

index.js

実行結果

セレクタに「~」を指定することで兄弟要素を取得しています。

メソッドで指定した要素の兄弟要素を取得する方法

next()で兄弟要素を取得する場合

jQueryのnext()メソッドで指定した要素の兄弟要素を取得を行ってみます。

sample.html

index.js

実行結果

next()メソッドで指定した要素の兄弟要素を取得しています。

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

nextAll()で兄弟要素を取得する場合

jQueryのnextAll()メソッドで指定した要素の兄弟要素の取得を行ってみます。

sample.html

index.js

実行結果

nextAll()メソッドで指定した要素の兄弟要素を取得しています。

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

nextUntil()で兄弟要素を取得する場合

jQueryのnextUntil()メソッドで指定した要素の兄弟要素の取得を行ってみます。

sample.html

index.js

実行結果

nextUntil()メソッドで指定した要素の兄弟要素を取得しています。

prev()で兄弟要素を取得する場合

jQueryのprev()メソッドで指定した要素の兄弟要素の取得を行ってみます。

sample.html

index.js

実行結果

prev()メソッドで指定した要素の兄弟要素を取得しています。

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

prevAll()で兄弟要素を取得する場合

jQueryのprevAll()メソッドで指定した要素の兄弟要素を取得を行ってみます。

sample.html

index.js

実行結果

prevAll()メソッドで指定した要素の兄弟要素を取得しています。

prevUntil()で兄弟要素を取得する場合

jQueryのprevUntil()メソッドで指定した要素の兄弟要素を取得を行ってみます。

sample.html

index.js

実行結果

prevUntil()メソッドで指定した要素の兄弟要素を取得しています。

slice()で兄弟要素を取得する場合

jQueryのslice()メソッドで指定した要素の兄弟要素の取得を行ってみます。

sample.html

index.js

実行結果

slice()メソッドで指定した要素の兄弟要素を取得しています。

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

siblings()で兄弟要素を取得する場合

jQueryのsiblings()メソッドで指定した要素の兄弟要素の取得を行ってみます。

sample.html

index.js

実行結果

siblings()メソッドで指定した要素の兄弟要素を取得しています。

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

今回のポイント

要素の兄弟要素を取得するには複数のメソッドがある

⚫︎ 兄弟要素とは指定した要素と同じ階層にある要素である

⚫︎ 要素の兄弟要素を取得するにはセレクタに「~」を使用したり、next()、nextAll()、nextUntil()、prev()、prevAll()、slice()、siblings()を使用したりするなど様々な方法がある

Writer
壷井

壷井

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

最新の案件情報