デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

callbacks.fireWith( )コールバックのリストを実行

構文

コールバックのリストを実行返値:なし
callbacks.fireWith( コンテキスト [,引数] )ver1.7〜

機能

callbacks.fireWithメソッドを学ぶには、callbacks.fireメソッドを先に確認してください。

callbacks.fireWithメソッドはcallbacks.fireメソッドと同じように、コールバックのリストに登録されたfunctuionを実行するために利用します。異なるのは引数の設定です。コンテキストにはコールバックのリストに追加したfunction内でthisとして利用したい要素を設定します。

callbacks.fireメソッドと同じように引数を渡すことができますが、配列で渡すことに注意してください。

解説

thisとして利用したい要素を指定する

サンプル(fireWith/01.html)を開いてbody内に2つのp要素があることを確認してください。p要素にはid属性(pink, green)が設定され、cssによって背景色が個別(ピンク、緑)に設定されています。

<p id="pink"></p>
<p id="green"></p>

jQueryでは、まず以下の部分を確認してください。1行目でコールバックオブジェクト「myCall」を作成し、2行目でcallbacks.addメソッドを利用してtestFuncをコールバックのリストに追加しています。

var myCall = $.Callbacks();
myCall.add(testFunc);

testFuncは以下の様に記述され、thisの指す要素にappendメソッドで「hello!」と表示します。ポイントは3行目のthisです。callbacks.fireWithメソッドは、このthisの指す要素を指定できるのです。

function testFunc(){
	this.append("hello!");
};

実際にcallbacks.fireWithメソッドを利用しているのは以下の部分です。buttonをクリックしたらcallbacks.fireWithメソッドを実行してcallbacks.addメソッドで登録したfunctionを実行します。そして引数で送った「$("#green")」が上記thisの指す要素となります。

$("button").click(function(){
	myCall.fireWith($("#green"));
});

結果として、buttonをクリックすると緑色のp要素に「hello!」と追加されます。

引数は配列で送ることに注意

callbacks.fireメソッドと同じようにcallbacks.addメソッドで追加したfunctionに引数を送ることができます。ただし配列で引数を送ることに注意してください。サンプル(fireWith/02.html)を開いてbody内の構成がfireWith/01.htmlと同じ事を確認してください。

jQueryは少し変更されており、以下の様にtestFuncが引数を受け取るようになっています。引数は変数strで受け取り、3行目のappendメソッドによりthisの要素内に表示されます。

function testFunc(str){
	this.append(str);
};

引数を渡すcallbacks.fireWithメソッドは以下の様に記述され、第2引数に配列を設定しています。このように値が1つでも配列で渡さなければなりません

$("button").click(function(){
	myCall.fireWith($("#green"), ["hello!"]);
});

結果として、buttonをクリックすると緑色のp要素に引数で渡した「hello!」が追加されます。

関連項目

コンテキストを渡す必要がない場合はcallbacks.fireメソッドを利用してください。