jQueryのfindしたあとのselectorプロパティ
jQueryのプラグインを書いていて壁にぶち当たった。
jQueryでfindしたあとのjQueryオブジェクトのselectorプロパティが予想と違ってハマったのでメモ。
jQueryオブジェクトのselectorプロパティをご存知であろうか。
var $foo = $("#main li a");
console.log($foo.selector); // #main li aselectorが取得できる。
こんな感じで実行するようにプラグインを作った
$.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でも使えます。便利だけど取り扱いが難しい。