・「prev()」の類似メソッドなどの応用的な使い方に関しても解説していきます。まとめ「prev()」とは?それでは、まず最初に「prev()」について基本的な知識から身に付けていきましょう!「prev()」は、特定のHTML要素を対象にしてその直前に配置されている要素を取得することができます。<a>リンク</a></div>このような配置のHTMLがある時に、例えば「aタグ」の直前にある要素を取得したい場合に「prev()」は役立ちます。ポイントは、対象となるHTML要素の直前にどんな要素が来ても取得できるという点です。本記事では、「prev()」について基本から応用まで解説していくのでぜひ参考にしてみてください!「prev()」の使い方この章では、「prev()」の基本的な使い方について見ていきましょう!一般的な構文から実際のプログラミング手法について学んでいきます。基本的な構文や書き方についてまずは、基本となる構文から見ていきましょう!一般的には、対象となるHTML要素に続けて「prev()」を実行するだけなので簡単です。);※直前の要素が知りたい対象のHTML要素を指定します「prev()」の引数については後述しますが、基本的には省略して使用することになります。引数を指定することで条件検索ができたり、類似メソッドの「prevAll()」で該当要素をすべて取得することも可能です。対象要素の直前にあるHTML要素を取得する方法それでは、実際に「prev()」を使ったプログラミング手法について見ていきましょう!まず最初に次のようなHTMLがあるとします。<a>リンク</a></div>これは冒頭でもご紹介したHTMLですね。そこで、「aタグ」の直前にあるHTML要素を取得するには次のように記述します。$('a').prev().text();console.log(result);実行結果テキストテキスト対象となるHTML要素を「a」として、続けて「prev()」を実行するだけで直前の要素を取得できます。この例では「text()」を使って直前の要素に含まれているテキストを取得しているのが実行結果からも分かりますね。「prev()」の引数この章では、「prev()」に引数を設定して使う方法について見ていきましょう!引数の使い方から実際の使用例について学んでいきます。セレクタ指定を引数に設定する方法まずは、引数を設定する方法について見ていきましょう!「prev()」に引数を設定すると、直前の要素が引数で指定した要素と一致した場合にのみ取得するという条件を付与できます。次の例を見てください!$('a').prev('h1');この場合だと、「aタグ」の直前にあるHTML要素が「h1タグ」であれば取得するという意味になります。直前にある要素が想定していないHTML要素の場合は取得しないという設定ができるわけです。$('a').prev('h1').text();console.log(result);この例では、結果的に何も取得できません。理由は簡単で、「aタグ」の直前にある要素は「h1」ではなく「pタグ」だからです!もし、直前の要素が「h1」であればテキストを取得できますが、今回は違うので何も取得できないわけです。「prev()」の類似メソッドこの章では、「prev()」によく似たメソッドについて見ていきましょう!一般的によく使われる「prevAll()」「next()」について学んでいきます。「prevAll()」で直前のHTML要素をすべて取得するまずは、「prevAll()」について見ていきましょう!「prevAll()」は、「prev()」と同じく直前のHTML要素を取得できるメソッドです。直前の要素だけでなく対象HTMLの前にある要素はすべて取得することが可能なのが特徴です。次のようなHTMLがあるとします。<a>リンク</a></div>このようなHTML構造がある時に、「aタグ」より前にある要素をすべて取得するには次のように記述します。$('a').prevAll().text();console.log(result);実行結果テキスト3テキスト2テキスト1タイトル対象となる「aタグ」に対して「prevAll()」を実行することで、「aタグ」より前にある要素をすべて取得しています。実行結果を見るとすべての要素のテキストを取得できているのが分かりますね。「next()」で対象の次にあるHTML要素を取得する次に、「next()」について見ていきましょう。「next()」は、「prev()」とは逆の意味になり対象の次にある要素を取得することができるメソッドになります。<a>リンク</a></div>この場合に「pタグ」の次にある要素を取得するには次のように記述します。$('p').next().text();console.log(result);実行結果リンク対象となる要素を「$('p')」として「next()」を実行することで、pタグの次にある要素を取得できます。実行結果を見ると「リンク」というテキストが取得できていることから、pタグの次にある「aタグ」が取得できているわけですね。2019年5月28日まとめ今回は、対象HTMLの直前に配置されている要素を取得できる「prev()」について学習をしました!最後に、もう一度ポイントをおさらいしておきましょう!・対象HTMLに「prev()」を実行することで直前の要素を取得できる・引数を指定することで特定の要素だけを取得する条件を付与できる・類似メソッドとして「prevAll()」「next()」がある上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。