【ワテのjQuery講座】●●で始まるけれど▲▲で終わらない要素を取得

この記事は約3分で読めます。
スポンサーリンク

例えばこんな 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の本を読むと良い

辞書のつもりで一冊常備しておくと良いだろう。

ポケットに入るくらいのサイズなのかな?

 

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

jQuery
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント