【jQuery入門】thisの使い方まとめ

こんにちは!フリーランスの桃太郎です。

他のプログラマーが書いたjQueryやJavaScriptのプログラムの中に”this”というキーワードを見かけ、何だこれは?と悩む初学者の方は多いかと思います。

そこでこの記事では

  • そもそもthisとは?
  • thisの基本的な使い方

という基礎的な内容から、

  • thisにてidやclassを取得する方法
  • thisの親要素/子要素を取得する方法

など応用的な内容についても解説していきます。jQueryのthisについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します!

そもそもthisとは

thisは日本語訳では”これ”、つまり何かを指し示す際に使われますが、プログラムにおいても様々なものを指し示す変数として使うことができます。

具体的には、例えば繰り返し処理の中で現在処理されている対象を示す為に利用したり、画面のチェクボックスににてユーザが選択した情報を取得する為にthisを使うこともできます。文章だけでは分かりづらいかと思いますので、実際のサンプルコードなどと併せて次章以降にて解説していきます。

thisの基本的な使い方

まずは以下のサンプルコードを確認してください。

[HTML] [jQuery] 実行結果
[HTML] jQueryのコードではeachメソッドを使い繰り返し処理を行なっており、その繰り返される要素がarray(配列)で定義されている中身の一つ一つです。

そして、繰り返し処理の中で使われているthisには現在処理されている要素が繰り返しの都度入れ替わり入っています。上記のように繰り返し処理の中で使用されるケースの他に、クリックされた要素を取得する場合などのケースでも使用されます。

次章ではそのケースについてみていくことにしましょう。

thisにてidやclassを取得する方法

まずは具体的な例として、ユーザが選択した年代によって、オススメの健康診断の項目が表示される画面を作るとします。まずはサンプルコードを確認しましょう。

[HTML] [jQuery] 実行結果[20代が選択された場合] 複数あるラジオボタンの選択肢にはそれぞれid値(twenty,thirtyなど)が設定されています。そのラジオボタンをユーザが選択した際に、選択された要素のidを var val = $(this).attr(‘id’); にて取得しています。

このようにthisをjQueryオブジェクト$(this)として扱い、attrメソッドの引数にidを指定することでthisのid値を取得することが可能です。

また、もし以下のようにHTMLのinputタグにてclass属性が設定されている場合はattrメソッドの引数に’class’を指定することでclassの値も同様に取得することができますので覚えておいてください。

thisの親要素/子要素を取得する方法

親要素、子要素とは何か?例えば、以下のHTMLをみてください。

上記のHTMLにて<div>は<p>要素の親要素、<p>は<div>要素の子要素になります。これはあるタグで囲まれた中に別のタグが含まれていた場合、その含まれている側は子要素、囲んでいる要素を親要素と定義しています。

では、thisと併せて親要素、子要素の取得する方法とは何かをみていくことにしましょう。

親要素の取得方法

こちらもまずは具体的なサンプルコードを確認してみましょう。

[HTML] [jQuery] 実行結果[ラジオボタンを選択すると全体が青色の罫線で囲まれる] jquery_this_img1

<input>タグ内の要素をクリックすると親要素である<p>タグに対して青色の罫線が作られる処理です。親要素である<p>タグを取得するために、$(this)の後にparent()メソッドを呼び出しています

こうすることで、$(this)に格納されている<input>タグ要素の親にあたる<p>タグの要素が取得できます。

子要素の取得方法

次に反対に子要素を取得する方法を確認しましょう。以下のサンプルでは、商品情報をクリックすると価格の箇所が青字に変わる処理を行なっています。

[HTML] [jQuery] 実行結果[テキストをクリックすると価格の箇所が青字になる] jquery_this_img2

上記サンプルにて、<p>タグが取得できている$(this)にて子要素にあたる<span>を取得するためにchildrenメソッドを呼び出しています。このようにして<span>タグに対してcssメソッドを適用することができます。

まとめ

本記事ではjQueryのthisの使い方についてご紹介しました。thisは繰り返し処理やイベントが発生した要素を取得するために活用できる変数でした。

そして、idやclass属性の値をattrメソッドを使うことで取得できることも学びましたね。thisは使いこなすことができれば、プログラミングをする上でとても有益な手法です。もし今後、thisに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

湯浅 桃太郎

湯浅 桃太郎

20代は役者、30代はエンジニア、そして40代を迎えた現在、Webライターとして活動しながら、3人の息子たちの家庭教育、アンチエイジングなどにも力を入れて日々ノマドライフを楽しんでいます。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説