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

2020年8月12日

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

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

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

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

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

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

.prevUntil()の機能とは？

.prevUntil()の機能

.prevUntill()は、「指定要素の前の兄弟要を範囲を指定して取得する」事ができる。

第一引数で取得する範囲を指定し、第二引数で絞り込む要素の条件を指定する事もでき、条件に合わない場合は取得しない。

引数を指定しない場合は.prevAll()と同じ機能になる。

.prevUntill()の構文

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

$("セレクタ").prevUntill("取得範囲の指定","取得条件");

メモ

「第一引数の取得範囲の指定」は、「セレクタで選んだ要素以前」〜「第一引数で指定した範囲まで」を指定する事となり、それぞれセレクタの要素と、第一引数で指定した要素は含まれない点に注意が必要だ。

第二引数（省略可）は、取得する条件を指定するもので、条件にマッチしない場合は取得されない。

.prevUntill()の使用例

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

HTML

<div>
  <p>りんご</p>
  <p class="koreikou">ぶどう</p>
  <p>バナナ</p>
  <p>メロン</p>
  <p class="target">みかん</p>
  <p>もも</p>
</div>

jQuery

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

この例ではclass="target"の以前の兄弟要素からさかのぼってclass="koreikou"より後の要素を取得して.css("color","red")とする事で、取得した要素の色を赤に変更する事ができ、この場合「バナナ、メロン」の文字が赤色に変わる。

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

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

第二引数を指定した場合

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

HTML

<div>
  <p>りんご</p>
  <p class="hani">ぶどう</p>
  <p class="shitei">バナナ</p>
  <p>メロン</p>
  <p class="target">みかん</p>
  <p>もも</p>
</div>

jQuery

$(function(){ 
  $(".target").prevUntil(".hani",".shitei").css("color","red")
});

この例ではclass="target"の以前の兄弟要素からさかのぼってclass="hani"より後の要素を取得して、さらに第二引数で指定する.shiteiの条件にマッチする要素を.css("color","red")とする事で、取得した要素の色を赤に変更する事ができ、この場合「バナナ」の文字だけが赤色に変わる。

CodePenで見てみよう。

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

.nextUntil()の機能とは？

基本的には.prevUntil()がそれ以前のもを取得するのに対して.nextUntil()ではそれ以降という扱いになるだけの違い。

.nextUntil()の機能

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

第一引数で取得する範囲を指定し、第二引数で絞り込む要素の条件を指定する事もでき、条件に合わない場合は取得しない。

どちらの引数を指定しない場合は.nextAll()と同じ機能になる。

.nextUntill()の構文

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

$("セレクタ").nextUntill("取得範囲の指定","取得条件");

メモ

「第一引数の取得範囲の指定」は、「セレクタで選んだ要素以降」〜「第一引数で指定した範囲まで」を指定する事となり、それぞれセレクタの要素と、第一引数で指定した要素は含まれない点に注意が必要だ。

第二引数（省略可）は、取得する条件を指定するもので、条件にマッチしない場合は取得されない。

.nextUntill()の使用例

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

HTML

<div>
  <p>りんご</p>
  <p class="target">ぶどう</p>
  <p>バナナ</p>
  <p>メロン</p>
  <p class="koreizen">みかん</p>
  <p>もも</p>
</div>

jQuery

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

この例ではclass="target"の以降の兄弟要素から順番にclass="koreizen"までの要素を取得して.css("color","red")とする事で、取得した要素の色を赤に変更する事ができ、この場合「バナナ、メロン」の文字が赤色に変わる。

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

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

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント