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

jQuery プログラミングイメージ

今回の記事は、

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

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


目次

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

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

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

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