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

jQueryで兄弟要素を取得する方法をサンプルコード付き解説します。jQueryで兄弟要素を取得する方法はいくつかありますが、ここでは良く使うものをピックアップして紹介します。

コンテンツ [表示]

  1. 1jQueryで兄弟要素を取得したい
  2. 2jQueryで兄弟要素を取得する方法
  3. 2.1対象要素の直前の要素を取得する方法
  4. 2.2次の要素を取得する方法
  5. 2.3同じ階層の要素をすべて取得する方法
  6. 3まとめ

jQueryで兄弟要素を取得したい

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

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

Photo byjamesmarkosborne

jQueryで兄弟要素を取得する方法

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

対象要素の直前の要素を取得する方法

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

.prev()メソッド

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

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

.prevAll()メソッド

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

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

次の要素を取得する方法

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

next()メソッド

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

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

.nextAll()メソッド

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

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

同じ階層の要素をすべて取得する方法

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

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

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

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

まとめ

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

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

【期間限定】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。