jQueryで兄弟要素を取得する方法まとめ【5つのメソッドを使い分け】

今回の記事は、

  • jQueryを使って全ての兄弟要素を取得したい
  • jQueryを使って一部の兄弟要素を取得したい
  • next() / nextAll()、prev() / prevAll()、siblings()メソッドの使い分け方を知りたい

という方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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

jQueryで親要素を取得するには、以下の5種類の方法があり、それぞれ用途が少しずつ異なっています。

  • 1. next()
  • 自身の一つ後の兄弟要素のみを取得
  • 2. nextAll()
  • 自身の後の兄弟要素を全て取得
  • 3. prev()
  • 自身の一つ前の兄弟要素のみを取得
  • 4. prevAll()
  • 自身の前の兄弟要素を全て取得
  • 5. siblings()
  • 全ての兄弟要素を取得

それぞれ順を追ってご紹介していきます。

自身の一つ後の兄弟要素のみを取得する方法 next()

next()メソッドを使用すると、自身の一つ後の兄弟要素のみを取得することができます。

基本的な使い方は簡単で、jQueryオブジェクトに対して直接呼び出すだけで大丈夫です。

基本的な使い方

$(セレクタ).next()

それでは早速、実際のコードを見ながらその挙動を確認していきましょう。

実装コード

<div>
  <p id="test-text1">テストテキスト1です</p>
  <p id="test-text2">テストテキスト2です</p>
  <p id="test-text3">テストテキスト3です</p>
  <p id="test-text4">テストテキスト4です</p>
</div>

<button onClick="getNext()">兄弟要素を取得</button>

<script>
function getNext() {
  const testTag1 = $("#test-text1")
  console.log(testTag1.next())
}
</script>

出力結果

[p#test-text2]

動作確認用

テストテキスト1です

テストテキスト2です

テストテキスト3です

テストテキスト4です

上記のボタンを押して頂くと、ディベロッパーツールのconsole画面に一つ後の兄弟要素(id属性がtest-text2)のみが表示されているかと思います。

自身の後の兄弟要素を全て取得する方法 nextAll()

先ほどのnext()メソッドでは自身の一つ後の兄弟要素のみ取得されていましたが、このnextAll()メソッドを使用すると自身の後の全ての兄弟要素を取得することができます。

基本的な使い方はnext()メソッドと同じですので、早速実際のコードを見ていきましょう。

実装コード

<div>
  <p id="test-text5">テストテキスト5です</p>
  <p id="test-text6">テストテキスト6です</p>
  <p id="test-text7">テストテキスト7です</p>
  <p id="test-text8">テストテキスト8です</p>
</div>

<button onClick="getNextAll()">兄弟要素を取得</button>

<script>
function getNextAll() {
  const testTag2 = $("#test-text5")
  console.log(testTag2.nextAll())
}
</script>

出力結果

[p#test-text6, p#test-text7, p#test-text8]

動作確認用

テストテキスト5です

テストテキスト6です

テストテキスト7です

テストテキスト8です

上記のボタンを押して頂くと、今度は自身より後の全ての兄弟要素が取得されているかと思います。

自身の一つ前の兄弟要素のみを取得 prev()

先ほどまでは自身の後の兄弟要素を取得するメソッドでしたが、続いて紹介するprev()メソッドを使うと、自身より一つ前の兄弟要素を取得することができます。

基本的な使い方はこれまでのメソッドと同じですので、早速実際のコードを見ていきましょう。

実装コード

<div>
  <p id="test-text9">テストテキスト9です</p>
  <p id="test-text10">テストテキスト10です</p>
  <p id="test-text11">テストテキスト11です</p>
  <p id="test-text12">テストテキスト12です</p>
</div>

<button onClick="getPrev()">兄弟要素を取得</button>

<script>
function getPrev() {
  const testTag3 = $("#test-text12")
  console.log(testTag3.prev())
}
</script>

出力結果

[p#test-text11]

動作確認用

テストテキスト9です

テストテキスト10です

テストテキスト11です

テストテキスト12です

上記のボタンを押して頂くと、今度は自身より前の兄弟要素が取得されているのがお分かりいただけるかと思います。

自身の前の兄弟要素を全て取得 prevAll()

先ほどのnext()メソッドとnextAll()メソッドの関係性と同じように、このprevAll()メソッドを使用すると自身の前の全ての兄弟要素を取得することができます。

基本的な使い方はこれまでのメソッドと同じですので、早速実際のコードを見ていきましょう。

実装コード

<div>
  <p id="test-text13">テストテキスト13です</p>
  <p id="test-text14">テストテキスト14です</p>
  <p id="test-text15">テストテキスト15です</p>
  <p id="test-text16">テストテキスト16です</p>
</div>

<button onClick="getPrevAll()">兄弟要素を取得</button>

<script>
function getPrevAll() {
  const testTag4 = $("#test-text16")
  console.log(testTag4.prevAll())
}
</script>

出力結果

[p#test-text13, p#test-text14, p#test-text15]

動作確認用

テストテキスト13です

テストテキスト14です

テストテキスト15です

テストテキスト16です

上記のボタンを押して頂くと、自身より前の兄弟要素が全て取得されているかと思います。

全ての兄弟要素を取得 siblings()

これまでは自身より前か後かどちらかの兄弟要素のみを取得していましたが、このsiblings()メソッドを使うと全ての兄弟要素を取得することができます。

基本的な使い方はこれまでのメソッドと同じですので、早速実際のコードを見ていきましょう。

実装コード

<div>
  <p id="test-text17">テストテキスト17です</p>
  <p id="test-text18">テストテキスト18です</p>
  <p id="test-text19">テストテキスト19です</p>
  <p id="test-text20">テストテキスト20です</p>
</div>

<button onClick="getAll()">兄弟要素を取得</button>

<script>
function getAll() {
  const testTag5 = $("#test-text19")
  console.log(testTag5.siblings())
}
</script>

出力結果

[p#test-text17, p#test-text18, p#test-text20]

動作確認用

テストテキスト17です

テストテキスト18です

テストテキスト19です

テストテキスト20です

上記のボタンを押して頂くと、前後に関係なく全ての兄弟要素が取得されているかと思います。

各メソッドの使い分けまとめ

それぞれのメソッドの機能、使い方を知っていただいたところで、最後にそれぞれの用途をまとめて整理しておきましょう。

  • 1. 1つ後の兄弟要素のみを取得する場合
  • →next()メソッド
  • 2. 後ろの兄弟要素を全て取得する場合
  • →nextAll()メソッド
  • 3. 1つ前の兄弟要素のみを取得する場合
  • →prev()メソッド
  • 4. 前の兄弟要素を全て取得する場合
  • →prevAll()メソッド
  • 5. 全ての兄弟要素を取得する場合
  • →siblings()メソッド

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryを使ってHTMLの兄弟要素を取得する方法について解説してきましたがいかがでしたか?

5種類のメソッドが存在していて、一見すると面倒臭そうに思われるかも知れませんが、こうして体系的にまとめてみるとそれほど難しくないことがお分かりいただけたかと思います。

いずれのメソッドも実際の開発でも頻繁に登場するものですので、ぜひこの機会に覚えてしまってくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。