count0.org

jQueryのfindしたあとのselectorプロパティ

30 January 2013 js

jQueryのプラグインを書いていて壁にぶち当たった。
jQueryでfindしたあとのjQueryオブジェクトのselectorプロパティが予想と違ってハマったのでメモ。

jQueryオブジェクトのselectorプロパティをご存知であろうか。

	var $foo = $("#main li a");
	console.log($foo.selector);	// #main li a

selectorが取得できる。
こんな感じで実行するようにプラグインを作った

	$.each(["#main", "#header", "#footer"], function(i, el) {
		$(el).find("li").somePlugin();
	});

プラグインの中でselectorプロパティを参照すると”#main li a”, “#header li a”, “#footer li a”を期待したけど全部”li a”になっていた。これは悲劇。
どういうことか調べると、stackoverflowのこのお話にたどり着く。

プラグインの中でliveに使う用途向きだけど、jQueryのtraversing系メソッド通しちゃうとselectorは意図しない感じになるようだ。

上記の例だとこう書かなければいけない。

	$.each(["#main", "#header", "#footer"], function(i, el) {
		$(el + " li a").somePlugin();
	});

すごくイケてない感じがするけど、これで一応乗り越えた。

追記

selectorプロパティは1.9で削除されました。が、1.10で使えるし、2.0でも使えます。便利だけど取り扱いが難しい。