【jQuery】間違えやすい「$(this)」と「this」の使い方とは?

Ads by Google

jQuery でプログラムを書いている際に「$(this)」と「this」の使い方で一瞬戸惑うことがありませんか?

基本的に「this」のほうは[DOMエレメント]で、イベントハンドラの「this」はそのイベントが発生した要素になり、「each」のコールバック関数内の「this」は順番の回ってきた該当する要素になります。

そして、「$(this)」はこの要素を$関数に渡して、[jQueryオブジェクト]化しているというワケ。

  • 「$(this)」はjQueryオブジェクト。
  • 「this」はDOMエレメント。

…このように使い分けることになります。

一例として、「a要素のhref属性を取得して何らかの処理を行う」とき、jQueryの「$(this)」を使うときと、単に「this」を使うときとでは、以下のような違いが生まれます。

$(function{
$('a').each(function() {
	var sample = $(this).attr('href');
	// ここに処理を書く
});
});

上記が[jQueryオブジェクト]ヴァージョン。
下記が[DOMエレメント]ヴァージョンになります。

$(function{
	$('a').each(function() {
	var sample = this.href;
	// ここに処理を書く
});
});
});

それぞれの違いを比べると、「$(this)」はa要素のjQueryオブジェクトとして作用するので、「$(this).jQueryメソッド」でメソッドが呼び出されることになります。
一方、「this」はa要素そのものを示すので、「this.href」などとして属性値を取得することができます。

初心者のjQueryプログラマーの方はお間違えのないように!

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google