読者です 読者をやめる 読者になる 読者になる

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

JavaScript jQuery

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

jquery-1.2.6.js / Line 73 - 76

	// 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

	// 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") の方が実行ステップは少ないです。ただ記述は長くなるし、大した差ではないので、後者で書こうとは思いません。