jQueryの$(this)の使い方(どこを指してるのか?)

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryを使い始めたばかりの人なんかは、特に$(this)の扱いがイマイチよく分からないということもあるかと思います。わたくしもそうでした。

$(this)がどこを指してるのか、また思うような箇所を取得する方法などいろいろなパターンから見ていきます。

$(this)の使い方

クリックした要素を取得

まずはクリックしたときに$(this)を使ってイベントを動作してみましょう。

HTML

jQuery

結果(動作サンプル)

下記テキストをクリックすると文字色が変わるかと思います。

jQueryのthisについて

参考:jQueryでcssを追加、削除

説明

$(this)は「イベントが発生した要素」です。

ここでの$(this)はクリックイベントが発生した<p>要素ということですね。

$(this)を使うときは、基本的にはその$(this)を囲うようにイベントが設定してあるかと思います。

始めのうちは、そのイベントのセレクタが$(this)の対象となると覚えておけばよいでしょう。

$(‘p’).click(function() {
  $(this).css(‘color’, ‘red’);
});

上記の$(this)$('p')のことですね。

しかし、わざわざ$(this)とせず、下記のようにしても動作するのであまり意味がありません。

$(‘p’).click(function() {
  $(‘p’).css(‘color’, ‘red’);
});

$(this)は次にご紹介するような、複数の同じ要素を扱うときにこそ力を発揮してくれます。

複数の要素からクリックした要素だけを取得

次は同じ要素が複数あった場合です。

HTML

jQuery($(this)を使う)

結果(動作サンプル)

下記テキストをクリックすると文字色が変わるかと思います。

jQueryのthisについて1
jQueryのthisについて2
jQueryのthisについて3
jQueryのthisについて4

同じ<p>要素でも、クリックしたとこだけ文字色が変わったかと思いますが、これが$(this)の便利なところですね。

これを、下記のように$(this)を使わずに$('p')とやると全ての<p>を指定するため、全部赤字になってしまします。

jQuery($(this)を使わない)

結果(動作サンプル)

下記テキストをクリックすると文字色が全て変わるかと思います。

jQueryのthisについて1
jQueryのthisについて2
jQueryのthisについて3
jQueryのthisについて4

上記のように、特定の<p>を1つだけ取得したい場合は$(this)が便利ですね。

親要素を取得

$(this)を使って親要素を取得してみましょう。

<p>要素をクリックすると、親要素の<div>が罫線で囲われます。

HTML

jQuery

結果(動作サンプル)

下記テキストをクリックすると罫線で囲われるかと思います。


jQueryのthisについて1
jQueryのthisについて2

上記で使ったparent()以外にも、以下でご紹介しているような親要素を取得する方法も使えます。

参考:jQueryで親要素を取得するいくつかの方法

子要素を取得

子要素はいくつかの書き方がありますが、2パターンを見てみましょう。

HTML

<p>要素の子要素に<span>があります。

jQuery①(children()を使う)

jQuery②(セレクタの頭に子要素)

結果(動作サンプル)

下記テキストをクリックすると子要素<span>の部分のみ赤字になるかと思います。

jQueryのthisについて1
jQueryのthisについて2

上記で使ったchildren()以外にも、以下でご紹介しているような子要素を取得する方法も使えます。

参考:jQueryで子要素を取得するいくつかの方法

idを取得する

idを取得し、次要素に出力してみましょう。

自要素と親要素のidを、自要素にテキストとして出力します。

HTML

idが付いた<p>要素の次要素には、出力用の<p>があります。

jQuery

結果(動作サンプル)

下記テキストをクリックすると、その下にid名が出力されるかと思います。


jQueryのthisについて1

jQueryのthisについて2


参考:jQueryのnext()やprev()などで兄弟要素を取得

より複雑な $(this)

これまでは比較的シンプルなサンプルでしたが、イベントの中に関数があったり、ajaxでデータ取得後のdone()$(this)を使いたい場合など、ちょっと複雑な場合を見ていきましょう。

イベントの中に関数がある場合

クリックイベントの中にさらにイベントがあり、その中で$(this)をすると直近のイベントしか取得されません。

HTML

idが付いた<p>要素の次要素には、出力用の<p>があります。

jQuery

結果(動作サンプル)

テキストをクリックすると新たなテキストが現れるかと思います。

jQueryのthisについて

しかしクリックした要素ではなく、新たに出現した要素の方にイベントが適応されました。

これは$(this)show()のイベントを拾ったためです。

もっとも直近のイベントしか取得されないため、一番外側のクリックした要素をイベントの対象とするためには以下のようにします。

jQuery

結果(動作サンプル)

テキストをクリックすると新たなテキストが現れるかと思います。

jQueryのthisについて

これでクリックした要素が赤字になりました。

最初のイベントの後にeach()animation()など、引数にfunction()が入るメソッド配下で$(this)を使うと、2番目に指定したイベントにフォーカスが当たってしまうため、注意しましょう。

ajaxの done() 内で最初のセレクタを指定したい

ajaxdone()$(this)を使うと、以下のようにajax通信で返ってきたdataなどになります。

まずは、テキストをクリックすると外部テキストファイルをajaxで読み込むサンプルです。

HTML

読み込みテキストファイル(memo.txt)

テスト読み込み
テスト読み込み2

jQuery

結果(コンソール-抜粋-)

膨大な量となるため、抜粋してご紹介します。

[Object]
0:Object
url:”memo.txt”

なんだかよく分からないテキストが表示されましたが、要するに外部テキストファイルが$(this)で呼ばれています。

参考:jQueryでコンソールログを使ったデバッグ方法

最初にクリックした<p>要素を呼びたい場合は、以下のようにオプションを追加すればOKです。

context: this

contextオプションを使えば、コールバック時の値を好きに設定できます。

jQuery

結果(動作サンプル)

テキストをクリックすると、外部テキストファイルの中身が出力されるかと思います。

jQueryのthisについて

ajaxcontextにクリックした要素を指すthisを指定したことで$(this)はクリックした要素を取得してくれました。

参考:text() でHTML要素にテキストを追加

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

  1. sk より:

    わかりやすくて非常にためになりました。ありがとうございました。

    1. flatFlag より:

      コメントありがとうございます。
      とても励みになります。
      これからも分かりやすい解説を心掛けていきますので、今後ともflatFlagをよろしくお願いします。

  2. tema より:

    初心者です。
    有料で教えているサイトを見ても「this」の扱い方がよくわかりませんでしたが、
    ようやく、腑に落ちました。(後半はさすがに無理ですが…)

    おかげさまで、jQueryを勉強することが楽しいです。
    どうもありがとうございます。

    1. flatFlag より:

      コメントありがとうございます。
      「this」は私自身もなかなか理解に時間がかかりましたので、特に丁寧に書きました。
      初心者の方でも理解いただけるような記事作成を今後とも意識してまいります。

  3. 吉田 より:

    これはどのサイトよりも分かりやすく、助かりました。
    本当にありがとうございます。

    1. flatFlag より:

      コメントありがとうございます。
      これからも分かりやすい記事作成を心がけていきますのでよろしくお願いします。

  4. syosinsya より:

    【お礼】
    $(this)については、市販の本を読んでもよくわからずモヤモヤしていましたが、こちらの記事でようやく理解することができました。記事を作成いただきありがとうございました。

  5. ガリガリくん より:

    丁寧にまとめていただき、わからないところが、わかるようになりました。
    ありがとうございます!

コメントを残す

*