子育ての話など、自由気ままに書いています!管理人『とろあ』。平日は普通のサラリーマン。通勤時間など時間を見つけてブログ更新中(不規則)。ブログを中心に色々と勉強中。ccWebデザイン勉強中。Webデザインの勉強の一つとして、jQueryの勉強を始めたのですが、jQuery(this)の内容について少々詰まったのでメモ。基本からですが、jQuery(this)とは現在処理している呼び出し元の要素のことになります。div#testの子要素であるa要素のhref属性の値を取得したい時のコードになります。僕が何で詰まったかというと...jQuery(this)を使用して値を取得しようとしたところ、期待した値が取得出来なくなってしまったのです。以下コードが期待通り動かなかった例。});});ちょっとわかりづらいかも知れませんが、「div#testの子要素であるa要素をクリック」した時に「a要素のhref属性に指定されている要素を表示してから、コールバック関数により続けてa要素の背景を赤色にする」というのが期待する動作なのですが。上記のコードでは、太字で示した箇所が期待通りに動きません。試しに実際に動かしてみましょう。以下に上記コードに対応した要素を用意してみました。id属性に”test”が付けられたdiv要素内です。href属性に”link1′′を指定したa要素です。href属性に”link2′′を指定したa要素です。id属性に”link1′′が付けられたdiv要素です。id属性に”link2′′が付けられたdiv要素です。a要素をクリックしたときに、fadeInで表示された側のdiv要素の背景が赤色に代わってしまうのがお分かり頂けたかと思います。これは、jQuery(this)が、実行中の処理が呼び出された要素を指すからなのです。上記の場合、fadeIn関数の後にfunction()がコールバック関数によって実行されています。コールバック関数で新たに処理が呼び出されたことにより、jQuery(this)の内容は、呼び出し元の「jQuery(jQuery(this).attr(“href”))」に変わってしまいます。コールバック関数を記述せずに、fadeIn()とcss()をメソッドチェーンなどで記述すれば、同じ要素を対象にするのですが、どうしてもコールバック関数を利用して順次処理をしたい場合はあると思います。上記の問題を回避するためにコードを以下のように書き直してみました。});});divのidをtest2にしているのは、前述のコードと区別するためです。clickイベントの処理実行中に、処理中の要素をcurrent変数に格納しておくことで、fadeIn処理後のコールバック関数内でも、コールバック関数が呼び出される前の要素を指定しています。以下、サンプルを用意しました。id属性に”test2′′が付けられたdiv要素内です。href属性に”link1′′を指定したa要素です。href属性に”link2′′を指定したa要素です。id属性に”link1′′が付けられたdiv要素です。id属性に”link2′′が付けられたdiv要素です。期待通り、a要素クリック後に対応するdiv要素が表示され、a要素の背景色が変更されました。メニューの表示切替を実装しようとしてjQueryを活用しようとしたところ、さっそく詰まってしまったのでメモ&シェアー。Evernoteで安心なパスワード管理術!当ブログが気になったら...是非RSSにご登録ください。