$.each の落とし穴

jQuery の $.each は for で書くよりさくっとかけて便利だ。 *1
使い方は

$.each([0, 1, 2], function() { alert(this); })

のように、第1引数に Array (or Object)、 第2引数に各要素に対する処理 Function を書く。


this は それぞれの値(この例だと 0, 1, 2)が入ってくるんだけど、ここで注意すべき点は型が Number から Object に変換されること*2
つまり下のようなコード*3だと、'a', 'b', 'c' と順にアラートすると思ったら 'hoge' としかアラートされない。これは、switch が '===' で比較しているため。

$.each(['a', 'b', 'c'], function(){
             alert(typeof this) // object
	switch(this) {
		case 'a':
			alert('a')
			break;
		case 'b':
			alert('b')
			break;
		case 'c':
			alert('c')
			break;
		default:
			alert('hoge')
			break;
	}
})


型変換されずに元の値をそのまま使いたい場合は

$.each([0, 1, 2], function(i, v) {
    alert(typeof v) // number
    alert(v)
}

このように、$.each の 第2引数の関数の第2引数 (上の例だと v)を扱う必要がある。ちなみに 第一引数 (上の例だと i)はインデックス(key) が入る。


$.each 内で switch や === を使って this を比較するときは気をつけようね。

追記 1:10

Number or String が Object に変換されるってのはつまり

var n = 3
s.apply(n)
function s {
    alert(this) // 3
    alert(typeof this) // object
}

こういうことなんですね。

*1:Array.forEach() が全ブラウザで使えるようになればいいんだけど。

*2:String も Object に変換される

*3:うまい例が思いつかず。