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

2020年8月12日

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

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

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

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

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

.prev()の機能とは？

.prev()の機能

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

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

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

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

.prev()の構文

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

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

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

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

.prev()の使用例

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

HTML

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

jQuery

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

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

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

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

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

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

HTML

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

jQuery

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

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

.prevAll()の機能とは？

.prevAll()の機能

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

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

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

.prevAll()の構文

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

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

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

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

.prevAll()の使用例

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

HTML

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

jQuery

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

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

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

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

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

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

HTML

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

jQuery

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

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

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

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

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

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

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

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

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

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

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

スクール選びのポイント