jQueryの属性セレクタで前方・後方・部分一致を使って要素を取得する

属性セレクタの前方・後方・部分一致を使うと、何かと便利なことが多いことに気が付きました。 そんなことも知らなかったのかと言われそうですが、ご参考までに。

例えば、下記のような inputの合計値を算出する場合、

<input type="text" name="num01" value="0" />
<input type="text" name="num02" value="0" />
<input type="text" name="num03" value="0" />

最高に単純に考えると

var sum = 0;
sum += parseInt($('input[name^=num01]').val());
sum += parseInt($('input[name^=num02]').val());
sum += parseInt($('input[name^=num03]').val());

なんてふうに書いてしまいそうになりますが、 それを以下のような感じで書くと、コードがスッキリとしてできる風な感じでvalueの合計値を算出することができます。

var sum = 0
$('input[name^=num]').each(function(){
  child_sum += parseInt($(this).val());
});

それも、この $('input[name^=num]') 属性セレクタの前方一致のおかげです。 前方一致・後方一致・部分一致 のそれぞれの書き方は以下の通りです。

前方一致

上記したサンプルの通り

[attribute^=value]

です。

api.jquery.com

後方一致

特定の文字列終わるモノをセレクトする場合に使用します。

[attribute$=value]

以下のような時に

<input type="text" name="aaa_price" value="0" />
<input type="text" name="bbb_price" value="0" />
<input type="text" name="ccc_price" value="0" />

こんな感じで取得できます。

$('input[name$=_price]')

api.jquery.com

部分一致

特定の文字列が含まれているモノをセレクトする場合に使用します。

[attribute*=value]

以下のような時に

<input type="text" name="a_price_aa" value="0" />
<input type="text" name="b_price_bb" value="0" />
<input type="text" name="c_price_cc" value="0" />

こんな感じで取得できます。

$('input[name*=_price_]')

api.jquery.com

まとめ

知っている人にとっては当たり前の項目かもしれませんが、 知っていると、コードがスッキするパターンが多くあると思います。
使いドコロもたくさんあると思うので、ちゃんと有効活用していきたいところです。

関連記事

marketing-web.hatenablog.com

jQueryクックブック