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

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でも使えます。便利だけど取り扱いが難しい。

一覧へ戻る