jQueryの$(this)とthisの違い

共通テーマ：

JavaScript テーマに参加中！

jQueryの$(this)とthisの違い

jQueryのイベントハンドラやコールバック関数内のthisについてです。

大した内容でもありませんが、なんとなく知らないまま使っている人もいるみたいなので、ちょっとメモ書き。

$(this)とthisの違い

thisはDOMエレメントです。

イベントハンドラのthisはそのイベントが発生した要素、eachのコールバック関数内のthisは順番の回ってきた該当する要素です。

一方$(this)の方はと言うと、この要素を$関数に渡して、単にjQueryオブジェクト化しているだけなんですね。

使い分け

という事で、使い分けは、

• DOMエレメントのプロパティやメソッドを使うときはthis
• jQueryオブジェクトのメソッドを使いたいときは$(this)

ということになります。

例えば

a要素のhref属性を取ってきて何か処理を書こうと思ったとき、

何も考えず普通にjQueryを使って書くとこうなりますが、

$('a').each(function() {
  var l = $(this).attr('href');
  …
});

使わない方が速くて簡単だったりします。

$('a').each(function() {
  var l = this.href;
  …
});

状況に応じて使い分けるのが良いですね。