jQuery の $(selector, context) な書き方は context.find(selector) を使うべきだった件について

June 19, 2008

先日、404 Not Found に参加しました。
#1 は未参加だったので、 jQuery.fn.init() について後から読んでいたのですが、あまり Travesing API を見ていなかったので、あるノード以下から選択するときは、 $(".classname", context) みたいに書いてました。

jquery-1.2.6.js / Line 73 - 76

1
2
3
4
// HANDLE: $(expr, \[context\])
// (which is just equivalent to: $(content).find(expr)
} else
return jQuery( context ).find( selector );

とあるとおり完全にオーバーヘッドでした。
上記の抜粋部分に辿りつくには、正義表現で expr を解析するステップ(下記の部分)が発生していて、find 呼び出しのブロックに流れるとその結果を捨てています。この解析では expr が生成用の HTML 文字列もしくは ID セレクトかを判別しているからです。どちらでもない場合は、find となります。よって $(“#id”, context) というセレクタが ID 指定の場合には今回の話は当てはまりません。

jquery-1.2.6.js / Line 47 - 50

1
2
3
4
// Are we dealing with HTML string or an ID?
var match = quickExpr.exec( selector );
// Verify a match, and that no context was specified for #id
if ( match && (match\[1\] || !context) ) {

最初に『あるエレメント下のものを対象にしたい』と調べていたら、まず jQuery( expression, [context] )に辿りついたので、何も考えずにこの書き方をしてました。これからは context.find(selector) を使うようにします。

単に $(“div”) といった選択も $(document).find(“div”) の方が実行ステップは少ないです。ただ記述は長くなるし、大した差ではないので、後者で書こうとは思いません。

tilfin freelance software engineer