jQuery｢.next() / .nextAll()｣で直後の兄弟要素を取得する方法

2020年8月12日

jQueryの「.next()と.nextAll()」は、指定要素の直後の兄弟要素を取得する事ができるメソッド

今回は、jQueryの「.next()と.nextAll()」について、その違いと使い方をサンプルを交えて解説しよう。

直後ではなく直前の兄弟要素を取得したい場合は.prev().prevAll()、すべての兄弟要素を取得したい場合は.siblings()というメソッドがあるのでこちらを参考にどうぞ。

▶ jQuery｢.prev() / .prevAll()｣で直前の兄弟要素を取得する方法

▶ jQuery｢.siblings() ｣ですべての兄弟要素を取得する方法

.next()の機能とは？

.next()の機能

.next()は、「指定要素の直後の兄弟要を取得する」事ができる。

また、引数に取得する要素の条件を指定する事で、絞り込む事も可であり、条件に合わない場合は取得しない。

「直後の兄弟要素」とは、ひとつ後の要素であり、直後の要素を１つだけを取得する場合にこの.next()メソッド利用する。

指定要素より後の要素をすべて取得したい場合は.nextAll()を使う

.next()の構文

.next()の構文は次のような記述となる

$("セレクタ").next("取得要素の条件");

「引数の取得要素の条件」は、指定する要素にマッチすれば取得し、マッチしなければ取得しない。

引数を「空欄」にすれば、直後の兄弟要素さえ存在すれば必ず取得する事になる（直後に兄弟要素がなければ取得できない）。

.next()の使用例

たとえば次のようなHTMLがあったとする

HTML

<div>
  <p>りんご</p>
  <p class="target">バナナ</p>
  <p>みかん</p>
  <p>もも</p>
</div>

jQuery

$(function(){
  $(".target").next().css("color","red")
});

この例ではclass="target"の直後の兄弟要素を取得して.css("color","red")で取得した要素の色を赤に変更する事ができ、この場合「みかん」の文字が赤色に変わる。

実際の動きをcodePenで見てみよう。

See the Pen jquery-next by stand4u (@stand4u) on CodePen.

.next()の引数に取得要素の条件を指定した場合

上記と同じHTMLで引数に「取得要素の条件を指定」した場合を見ていこう。

HTML

<div>
  <p>りんご</p>
  <p class="target">バナナ</p>
  <p>みかん</p>
  <p>もも</p>
</div>

jQuery

$(function(){
  $(".target").next("span").css("color","red")
});

この例では.next("span")とする事で、直後の兄弟要素がspanの場合のみ取得するという条件を指定する事になるが、この場合直後の兄弟要素は<p>みかん</p>であり、条件にマッチしないので、取得しない事になる。

.nextAll()の機能とは？

.nextAll()の機能

.nextAll()は、「指定要素の後の兄弟要をすべて取得する」事ができる。

また、引数に取得する要素の条件を指定する事で、絞り込む事も可能であり、条件に合わない場合は取得しない。

.next()と違い.nextAll()は「後の兄弟要素すべて」取得する事ができ、引数に取得要素を指定する事でより広範囲にて要素を拾う事ができる。

.nextAll()の構文

.nextAll()の構文は次のような記述となる

$("セレクタ").nextAll("取得要素の条件");

「引数の取得要素の条件」は、指定する要素にマッチすれば取得し、マッチしなければ取得しない。

引数を「空欄」にすれば、後の兄弟要素さえ存在すれば、後の兄弟要素をすべて取得する事ができる。

.nextAll()の使用例

さきほどの例と同じHTMLがあったとする

HTML

<div>
  <p>りんご</p>
  <p class="target">バナナ</p>
  <p>みかん</p>
  <p>もも</p>
</div>

jQuery

$(function(){
  $(".target").nextAll().css("color","red")
});

この例ではclass="target"より後の兄弟要素を取得して.css("color","red")で取得した要素の色を赤に変更する事ができ、この場合指定要素より後に存在する兄弟要素である、「みかん」「もも」の文字が赤色に変わる。

実際の動きをcodePenで見てみよう。

See the Pen jquery-nextAll by stand4u (@stand4u) on CodePen.

nextAll()の引数に取得要素の条件を指定した場合

次のHTMLで引数に「取得要素の条件を指定」した場合を見ていこう。

HTML

<div>
  <p>りんご</p>
  <p class="target">バナナ</p>
  <a href="#">すいか</a>
  <a href="#">パイナップル</a>
  <p>みかん</p>
  <p>もも</p>
</div>

jQuery

$(function(){
  $(".target").nextAll("a").css("color","red")
});

この例では.nextAll("a")とする事で、指定要素より後の兄弟要素がaタグの場合のみ取得するという条件を指定する事になり、この場合<a href="#">すいか</a>と<a href="#">パイナップル</a>が条件にマッチして赤色に変わる事になる。

CodePebで実際の挙動を見てみよう

See the Pen jquery- nextAll by stand4u (@stand4u) on CodePen.

さらに範囲を指定したい場合は.nextUntil()というメソッドがあり、詳しくはこちらを参考にどうぞ。

▶ jQuery｢.prevUntil() / .nextUntil()｣で前後の兄弟要素を取得する方法

AI時代にHTML・CSS・Jqueryの学習は不要説

AIの進化に指をくわえて見ているだけでいいのか？

ClaudeやCodexなどのAIの進化のスピードに脅威を感じないだろうか？HTMLやCSSやjQueryなどは、ClaudeやCodexに頼めばほんの１〜２分で完成していまいます。とてもスピードでは太刀打ちできないし、人間がゼロベースからHTMLコーディングをする仕事は、いずれ終焉を迎えるでしょう。では、HTMLコーディングを学ぶ必要は無いのか？

「その答えはNOです。」

コーディングを学ぶ、その理由は？

AIでバイブコーディングをしているプロの方なら分かると思うのですが、AIが出すコードにも調整が必要な事が多々あるという事。例えば「ここはflexを使った方が後々楽になる」とか、「ここはまとめて変数で指定してほしい」など、HTMLを理解した上でAIに具体的に指示する方が圧倒的に速い。さらにちょっとした修正なら、いちいちAIに言葉を考えて説明するより「自分で修正した方が楽な場合がよくある」という事。つまりまとめると、AIにコーディングさせるなら、人間もコーディングを理解している方が圧倒的に良いという事である。

AI時代に、体系的に学ぶコーディング手法

普段ClaudeやCodexを使ってバイブコーディングをしている私が、必要と感じるHTMLの学習を、基礎からみっちり理解しつつも、最新のコーディング手法を学べ、初心者の方がついてイケるように、HTMLの基礎理論から、スマホのためのレスポンシブコーディングまでを、新しいCSSの変数やネスト記法やjQueryを使った開閉メニューの実装やFigmaデータからのコーディングの仕方など、ゼロからひと通りコーディングできるまで体系的に学べる動画講座を作りました。

「動画の無料プレビュー」もあるので、一度覗いてみてください▼