jQuery 「this」の内容は呼び出し元に依存する

Webデザイン勉強中。とろあ( @tohroa )です。

Webデザインの勉強の一つとして、jQueryの勉強を始めたのですが、jQuery(this)の内容について少々詰まったのでメモ。

jQuery(this)の内容

基本からですが、jQuery(this)とは現在処理している呼び出し元の要素のことになります。

例えば…

jQuery("div#test a").click(function(){
  jQuery(this).attr("href");
};

上記のようなコードがあるとすれば、ここでのjQuery(this)は、jQuery(“div#test a”)が該当します。

div#testの子要素であるa要素のhref属性の値を取得したい時のコードになります。

jQuery(this)の範囲

僕が何で詰まったかというと…jQuery(this)を使用して値を取得しようとしたところ、期待した値が取得出来なくなってしまったのです。

以下コードが期待通り動かなかった例。

jQuery("div#test a").click(function(){
  jQuery(jQuery(this).attr("href")).fadeIn(200,function(){
    jQuery(this).css("background-color","red");
  });
});

ちょっとわかりづらいかも知れませんが、「div#testの子要素であるa要素をクリック」した時に「a要素のhref属性に指定されている要素を表示してから、コールバック関数により続けてa要素の背景を赤色にする」というのが期待する動作なのですが。

上記のコードでは、太字で示した箇所が期待通りに動きません。

試しに実際に動かしてみましょう。以下に上記コードに対応した要素を用意してみました。

a要素をクリックしたときに、fadeInで表示された側のdiv要素の背景が赤色に代わってしまうのがお分かり頂けたかと思います。

これは、jQuery(this)が、実行中の処理が呼び出された要素を指すからなのです。

上記の場合、fadeIn関数の後にfunction()がコールバック関数によって実行されています。

コールバック関数で新たに処理が呼び出されたことにより、jQuery(this)の内容は、呼び出し元の「jQuery(jQuery(this).attr(“href”))」に変わってしまいます。

コールバック関数を記述せずに、fadeIn()とcss()をメソッドチェーンなどで記述すれば、同じ要素を対象にするのですが、どうしてもコールバック関数を利用して順次処理をしたい場合はあると思います。

上記の問題を回避するためにコードを以下のように書き直してみました。

jQuery(function(){
  jQuery("div#test2 a").click(function(){
    var current = jQuery(this);
    jQuery(jQuery(current).attr("href")).fadeIn(200,function(){
      jQuery(current).css("background-color","red");
    });
  });
});

divのidをtest2にしているのは、前述のコードと区別するためです。

clickイベントの処理実行中に、処理中の要素をcurrent変数に格納しておくことで、fadeIn処理後のコールバック関数内でも、コールバック関数が呼び出される前の要素を指定しています。

以下、サンプルを用意しました。

期待通り、a要素クリック後に対応するdiv要素が表示され、a要素の背景色が変更されました。

メニューの表示切替を実装しようとしてjQueryを活用しようとしたところ、さっそく詰まってしまったのでメモ＆シェアー。