例えばこんな div が有った場合に、
<div id="div_ID1"> <div id="div_ID1_sub"> </div> </div> <div id="div_ID2"> <div id="div_ID2_sub"> </div> </div>
jQueryを使ってこんなふうにすると、
var divAllJQ = $('div[id^="div_ID"]');
四つのDIVを全部取得出来る。
解説すると、
id^="div_ID"
は id が
“div_ID” で始まっているHTML要素と言う意味になる。
そういう要素に対して、
div[id^="div_ID"]
とすると、div要素のうち “div_ID” で始まっているものが得られる。
このjQueryのセレクターで使う山印 ^ の記号は、正規表現の場合にも ^ 記号を使うが、それは文字列の先頭と言う意味があるので、
jQueryの記法 =^ はその正規表現の山記号のニユアンスを込めた記法だと思う。
さて、先日こんな場面に遭遇した。
つまり、上の例では四つのdivを取得したが、ワテの場合には _sub で終わっている div は除外したい。
まとめると、
div要素のうち、
- id が “div_ID” で始まるけれど、
- id が “_sub” では終わるものは除外
そう言う div を全部取得したい。
と言う場面だ。
“div_ID” で始まるが “_sub” で終わらない div要素を取得するjQueryのセレクター記述法
以下のようにすると id が “_sub” と言う名前のdivを除外出来る。
変更前
var divAllJQ = $('div[id^="div_ID"]'); // 四つのdivを全部取得する
変更後
var divAllJQ = $('div[id^="div_ID"]:not([id$="_sub"])'); // _sub は除外
これによって、以下の二つのdivは取得するが、
div_ID1 div_ID2
末尾に “_sub” があるdiv
div_ID1_sub div_ID2_sub
は除外出来る。
あるいは、idが “div_ID” で始まる四つのdivの中から一つだけ除外するなら
var divAllJQ = $('div[id^="div_ID"]:not([id="div_ID1_sub"])');
とすると、id=”div_ID1_sub” のみ除外した三つの div が得られる。
[セレクター][セレクター]・・・を並べるとANDで絞り込める
では、”div_ID” で始まって “_sub” で終わる div要素のみ取得したい場合はどうなるか？
つまり上の例の逆のパターンだ。
その場合は、もっとシンプルになり、
var divAllJQ = $('div[id^="div_ID"][id$="_sub"]'); // divIDで始まり_sub で終わるもの
となる。
この場合には $ 記号が出て来るが、これも正規表現では文字列の末尾を表すのでそのニュアンスを込めた記法が $= だと思う。
このように、jQueryのセレクターは、
div[フィルター条件1][フィルター条件2][フィルター条件3]
と並べて行くと、AND条件として絞り込んで行く事が出来る。
まとめ
jQueryの本を読むと良い
辞書のつもりで一冊常備しておくと良いだろう。
ポケットに入るくらいのサイズなのかな？
コメント