jQueryのfindしたあとのselectorプロパティ
公開日 2013-01-30
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でも使えます。便利だけど取り扱いが難しい。