こんにちは、ライターのマサトです！
今回は、jQueryから対象要素の直前にあるHTML要素を取得できる「prev()」について学習をしていきましょう！
この記事では、
・「prev()」とは？
・「prev()」の使い方
という基本的な内容から、
・「prev()」の引数
・「prev()」の類似メソッド
などの応用的な使い方に関しても解説していきます。
この記事で、「prev()」をしっかり学習して自分のスキルアップを目指しましょう！
「prev()」とは？
それでは、まず最初に「prev()」について基本的な知識から身に付けていきましょう！
「prev()」は、特定のHTML要素を対象にしてその直前に配置されている要素を取得することができます。
次のようなHTMLを見てください！
<div>
<h1>サンプルタイトル</h1>
<p>テキストテキスト</p>
<a>リンク</a>
</div>
このような配置のHTMLがある時に、例えば「aタグ」の直前にある要素を取得したい場合に「prev()」は役立ちます。
ポイントは、対象となるHTML要素の直前にどんな要素が来ても取得できるという点です。
本記事では、「prev()」について基本から応用まで解説していくのでぜひ参考にしてみてください！
「prev()」の使い方
この章では、「prev()」の基本的な使い方について見ていきましょう！
一般的な構文から実際のプログラミング手法について学んでいきます。
基本的な構文や書き方について
まずは、基本となる構文から見ていきましょう！
一般的には、対象となるHTML要素に続けて「prev()」を実行するだけなので簡単です。
HTML要素.prev( セレクタ指定(省略可) ); ※直前の要素が知りたい対象のHTML要素を指定します
「prev()」の引数については後述しますが、基本的には省略して使用することになります。
引数を指定することで条件検索ができたり、類似メソッドの「prevAll()」で該当要素をすべて取得することも可能です。
対象要素の直前にあるHTML要素を取得する方法
それでは、実際に「prev()」を使ったプログラミング手法について見ていきましょう！
まず最初に次のようなHTMLがあるとします。
<div>
<h1>サンプルタイトル</h1>
<p>テキストテキスト</p>
<a>リンク</a>
</div>
これは冒頭でもご紹介したHTMLですね。
そこで、「aタグ」の直前にあるHTML要素を取得するには次のように記述します。
var result = $('a').prev().text();
console.log(result);
実行結果
テキストテキスト
対象となるHTML要素を「a」として、続けて「prev()」を実行するだけで直前の要素を取得できます。
この例では「text()」を使って直前の要素に含まれているテキストを取得しているのが実行結果からも分かりますね。
「prev()」の引数
この章では、「prev()」に引数を設定して使う方法について見ていきましょう！
引数の使い方から実際の使用例について学んでいきます。
セレクタ指定を引数に設定する方法
まずは、引数を設定する方法について見ていきましょう！
「prev()」に引数を設定すると、直前の要素が引数で指定した要素と一致した場合にのみ取得するという条件を付与できます。
例えば、次の例を見てください！
$('a').prev('h１');
この場合だと、「aタグ」の直前にあるHTML要素が「h1タグ」であれば取得するという意味になります。
つまり、直前にある要素が想定していないHTML要素の場合は取得しないという設定ができるわけです。
引数を使って検索対象を絞る方法
それでは、「prev()」の引数を使った実際のプログラミング例を見てみましょう！
ここで次のHTMLをもう一度見てみましょう！
<div>
<h1>サンプルタイトル</h1>
<p>テキストテキスト</p>
<a>リンク</a>
</div>
このような配置のHTML構造で、「prev()」の引数に「h1」を指定するとどうなるか見てみましょう！
var result = $('a').prev('h１').text();
console.log(result);
この例では、結果的に何も取得できません。
理由は簡単で、「aタグ」の直前にある要素は「h1」ではなく「pタグ」だからです！
もし、直前の要素が「h1」であればテキストを取得できますが、今回は違うので何も取得できないわけです。
「prev()」の類似メソッド
この章では、「prev()」によく似たメソッドについて見ていきましょう！
一般的によく使われる「prevAll()」「next()」について学んでいきます。
「prevAll()」で直前のHTML要素をすべて取得する
まずは、「prevAll()」について見ていきましょう！
「prevAll()」は、「prev()」と同じく直前のHTML要素を取得できるメソッドです。
しかし、直前の要素だけでなく対象HTMLの前にある要素はすべて取得することが可能なのが特徴です。
例えば、次のようなHTMLがあるとします。
<div>
<h1>タイトル</h1>
<p>テキスト1</p>
<p>テキスト2</p>
<p>テキスト3</p>
<a>リンク</a>
</div>
このようなHTML構造がある時に、「aタグ」より前にある要素をすべて取得するには次のように記述します。
var result = $('a').prevAll().text();
console.log(result);
実行結果
テキスト3テキスト2テキスト1タイトル
対象となる「aタグ」に対して「prevAll()」を実行することで、「aタグ」より前にある要素をすべて取得しています。
実行結果を見るとすべての要素のテキストを取得できているのが分かりますね。
「next()」で対象の次にあるHTML要素を取得する
次に、「next()」について見ていきましょう。
「next()」は、「prev()」とは逆の意味になり対象の次にある要素を取得することができるメソッドになります。
次のHTMLを見てください！
<div>
<h1>サンプルタイトル</h1>
<p>テキストテキスト</p>
<a>リンク</a>
</div>
この場合に「pタグ」の次にある要素を取得するには次のように記述します。
var result = $('p').next().text();
console.log(result);
実行結果
リンク
対象となる要素を「$(‘p’)」として「next()」を実行することで、pタグの次にある要素を取得できます。
実行結果を見ると「リンク」というテキストが取得できていることから、pタグの次にある「aタグ」が取得できているわけですね。
ちなみに、「next()」についてさらに詳しい使い方や引数の設定方法などを次の記事で解説しているのでぜひ参考にしてみてください！
まとめ
今回は、対象HTMLの直前に配置されている要素を取得できる「prev()」について学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
・対象HTMLに「prev()」を実行することで直前の要素を取得できる
・引数を指定することで特定の要素だけを取得する条件を付与できる
・類似メソッドとして「prevAll()」「next()」がある
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
