JQueryのセレクタ指定の罠 - 新、俺ら陽気なプログラマー的備忘録

罠…なんて少し大げさですが、ちょっとハマったことがありました。
JQuery(8系9系)を使っていてhtmlのセレクタ指定でうまく値を取得できなかったので、とりあえず備忘録。

htmlで

<div id="hoge">
  <div class="firstclass">
     <img src="image.jpg">
  </div>
</div>

というのがあって、
このソースから画像ファイル名を取得するとき、

$(#hoge .firstclass).attr("src");

とすれば、値が取れると思いますが、

今度は、こんなhtmlで

<div id="hoge" class="secondclass">
   <img src="image.jpg">
</div>

このソースから画像ファイル名を取得しようとして…

$(#hoge .secondclass).attr("src");

とすれば、値が取れると思ったのですが…

と、取れなかった…

それどころか、この書き方で値が取れてないなんて思ってなくて、ちょっとハマってしまいました…
alertしてみて始めて気づき…なんとなく書いたのが、

$(#hoge.secondclass).attr("src");

(hogeと.secondclassの間のスペースを消してみた)
と、取れた！

え！？なに！？
ググったんですがそんな記事見当たらなかった…

つまり、idを基準に子クラスを呼ぶ場合は、最初の書き方で良いのですが、
idと同じタグ内に記載してあるクラスを呼びたい場合は、どうもスペースをつめないといけないようなのです。
こちらに関してはもっと検討していきたいです。

それにしても、idはユニークなので、本来はあまりこういう呼び出し方をしないはずですが、
どうしても今回はこういう風に実装せざるを得なかったのです…
今回は、なんとか仕事で実装しましたが、無駄な動きが多いソースになってしまった…
それに、リソースの無駄遣いや、個人的にはもっと直したかったです…
いろいろとまだまだ修行が足りません…トホホ…

ところでセレクタに関するURLメモ

Selectors - jQuery 日本語リファレンス
基本的なとこから

jQuery – いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する | 1：n – DETELU Blog
一覧で分かりやすいかも

http://webdesignrecipes.com/webdesign-jquery-coding/
見やすくて分かりやすい！

他にも↑のページに似た素敵なページを見つけたのですが…URL見つけきれなかった…