いるみおロゴ
About Blog & Me

当ブログ『いるみお』は管理人の日常の出来事を中心に、
Mac/iPhoneのことブログのこと美味しかった食べ物
子育ての話など、自由気ままに書いています!

管理人『とろあ』。平日は普通のサラリーマン。
通勤時間など時間を見つけてブログ更新中(不規則)。
ブログを中心に色々と勉強中。
2013年にパパになったので、子育ても奮闘中XD

author-icon
medium_5635232593.jpg
photo credit: “Cowboy” Ben Alman via photopin cc

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を活用しようとしたところ、さっそく詰まってしまったのでメモ&シェアー。

当ブログが気になったら…是非RSSにご登録ください。