1. ホーム /
  2. jQuery /
  3. jQueryの$(this)の使い方(どこを指してるのか？)

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

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

スポンサードリンク

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

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

$(this)の使い方

クリックした要素を取得

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

HTML

1
<p>jQueryのthisについて</p>

jQuery

1
2
3
4
5
6
7
8
9
10
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //クリックした<p>要素自身の文字色を赤字にする
    $(this).css('color', 'red');
 
  });
});

結果（動作サンプル）

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

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

1
2
3
4
<p>jQueryのthisについて1</p>
<p>jQueryのthisについて2</p>
<p>jQueryのthisについて3</p>
<p>jQueryのthisについて4</p>

jQuery（$(this)を使う）

1
2
3
4
5
6
7
8
9
10
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //クリックした<p>要素だけ文字色を赤字にする
    $(this).css('color', 'red');
 
  });
});

結果（動作サンプル）

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //<p>要素をセレクタにすると全部赤字になる
    $('p').css('color', 'red');
 
  });
});

結果（動作サンプル）

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

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

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

親要素を取得

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

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

HTML

1
2
3
4
<div>
  <p>jQueryのthisについて1</p>
  <p>jQueryのthisについて2</p>
</div>

jQuery

1
2
3
4
5
6
7
8
9
10
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //クリックした<p>の親要素を罫線で囲う
    $(this).parent().css('border', '3px solid red');
 
  });
});

結果（動作サンプル）

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

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

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

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

子要素を取得

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

HTML

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

1
2
<p>jQueryの<span>this</span>について1</p>
<p>jQueryの<span>this</span>について1</p>

jQuery①（children()を使う）

1
2
3
4
5
6
7
8
9
10
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //クリックした<p>の子要素だけ文字色を赤字にする
    $(this).children().css('border', '1px solid #c00');
 
  });
});

jQuery②（セレクタの頭に子要素）

1
2
3
4
5
6
7
8
9
10
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //セレクタの頭に子要素を追加
    $('span', this).css('border', '1px solid #c00');
 
  });
});

結果（動作サンプル）

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

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

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

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

idを取得する

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

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

HTML

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

1
2
3
4
5
6
<div id="box">
  <p id="this1">jQueryの<span>this</span>について1</p>
  <p></p>
  <p id="this2">jQueryの<span>this</span>について2</p>
  <p></p>
</div>

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
 
  //this1のIDが付いた要素をクリックしたら発動
  $('#this1').click(function() {
    //クリックした要素のIDを変数に格納
    var val = $(this).attr('id');
    //次要素に出力
    $(this).next().text(val);
  });
 
  //this2のIDが付いた要素をクリックしたら発動
  $('#this2').click(function() {
    //クリックした要素のさらに親要素のIDを変数に格納
    var val = $(this).parent().attr('id');
    //次要素に親要素のIDを出力
    $(this).next().text(val);
  });
 
});

結果（動作サンプル）

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

jQueryのthisについて1

jQueryのthisについて2

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

より複雑な $(this)

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

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

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

HTML

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

1
2
3
<p>jQueryのthisについて</p>
<!--隠れているテキスト-->
<p id="hide" style="display: none;">出現テキスト！</p>

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //隠れているテキストがゆっくり表示される
    $('#hide').show('fast', function() {
 
      //イベント元の要素が赤字になる
      $(this).css('color', 'red');
 
    });
  });
});

結果（動作サンプル）

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

jQueryのthisについて

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

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

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

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //ここで$(this)を変数に格納
    //上記$('p')が$(this)になる
    var elm = $(this);
 
    //隠れているテキストがゆっくり表示される
    $('#hide').show('fast', function() {
 
      //変数に格納した時点での$(this)が呼ばれる
      elm.css('color', 'red');
 
    });
  });
});

結果（動作サンプル）

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

jQueryのthisについて

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

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

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

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

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

HTML

1
<p>jQueryのthisについて</p>

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

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

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //ajax通信
    $.ajax({
 
      //読み込む外部テキストファイル
      url: 'memo.txt',
    })
 
    //通信が成功したら
    .done(function(data) {
 
      //上記dataが呼ばれる
      console.log($(this));
 
    });
  });
});

結果（コンソール-抜粋-）

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

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

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

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

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

context: this

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

jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function() {
 
  //<p>要素をクリックしたら発動
  $('p').click(function() {
 
    //ajax通信
    $.ajax({
 
      //読み込む外部テキストファイル
      url: 'memo.txt',
 
      //contextを指定すれば返り値を好きに設定可能
      context: this,
    })
 
    //通信が成功したら
    .done(function(data) {
 
      //クリックした<p>要素にテキストファイルの中身を出力
      console.log($(this).text(data));
 
    });
  });
});

結果（動作サンプル）

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

jQueryのthisについて

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

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

スポンサードリンク

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

コメント

  1. sk より:
    2017年7月20日 23:59

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

    返信
    1. flatFlag より:
      2017年7月31日 10:29

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

      返信
  2. tema より:
    2018年10月30日 20:29

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

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

    返信
    1. flatFlag より:
      2018年11月16日 16:10

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

      返信
  3. 吉田 より:
    2019年7月20日 19:14

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

    返信
    1. flatFlag より:
      2019年9月7日 11:46

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

      返信
  4. syosinsya より:
    2022年5月21日 16:25

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

    返信
  5. ガリガリくん より:
    2022年5月24日 07:53

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

    返信

コメントを残す

*