jQueryで兄弟要素を取得する方法をサンプルコード付き解説！

jQueryを使えば、指定した要素に対し、同じ親要素を持つ直前/直後の兄弟要素を取得することができます。

そしてjQueryで兄弟要素を取得する方法はいくつかありますが、ここでは良く使うものをピックアップして紹介します。

ではjQueryで兄弟要素を取得する方法を項目を分けて解説します。

対象要素の直前の要素を取得する方法としては.prev()と.prevAll()メソッドがあります。

.prev()メソッドは同じ階層にある1つ前の要素のみ取得します。

このように同じ階層の直前の要素1つのみ取得できていることが分かります。

.prevAll()メソッドは同じ階層の前の要素全てを取得します。

このように同じ階層の前の要素全て取得できていることが分かります。

次の要素を取得する方法としては.next()と.nextAll()メソッドがあります。

.next()メソッドは同じ階層の隣接する要素1つだけ取得します。

このように同じ階層の次の要素1つだけ取得できていることが分かります。

.nextAll()メソッドは同じ階層の次の要素全てを取得します。

このように同じ階層の次の要素全て取得されていることが分かります。

同じ階層の要素をすべて取得する方法には、.siblings()メソッドを用います。

.siblings()メソッドを用いると対象要素の「前・後」に関わらず、同階層であれば特定の要素を取得できます。

.siblings()メソッドは.siblings(セレクタ)と記述することで用いることができます。

このように同階層の特定の要素全て取得できていることが分かります。

いかがでしたでしょうか？

ぜひここで紹介した方法を用いてjQueryで兄弟要素を取得してみてください。