jQueryのセレクタ

2020/09/23

jQueryをこよなく愛する中年おじさんによる、jQueryのセレクタについての記事をしたためます。

基本的なセレクタの操作に関しては、すでに知っている前提での記事となります。
こちらの記事ではセレクタの応用(?)編に関してまとめたものを書いていきます。

いつも忘れがちなので、備忘録もかねてます。



1. 前方一致指定

属性指定の際に^をつけることで、前方一致指定で取得可能です。

HTML

<input name="hoge1" value="1">
<input name="hoge2" value="2">
<input name="hoge3" value="3">

JS

<script>
var $hoge = $("[name^=hoge]");
$hoge.each(function(){
    console.log($(this).val());
});
</script>

実行結果

1
2
3

2. 後方一致指定

属性指定の際に$をつけることで、前方一致指定で取得可能です。

HTML

<input name="ahoge" value="a">
<input name="bhoge" value="b">
<input name="choge" value="c">

JS

<script>
var $hoge = $("[name$=hoge]");
$hoge.each(function(){
    console.log($(this).val());
});
</script>

実行結果

a
b
c

3. チェック済チェックボックスの指定

HTML

<input type="checkbox" name="hoge" value="1" checked="checked">
<input type="checkbox" name="hoge" value="2" checked="checked">
<input type="checkbox" name="hoge" value="3">

JS

<script>
var $hoge = $("[name=hoge]:checked");
$hoge.each(function(){
    console.log($(this).val());
});
</script>

実行結果

1
2

4. 指定「以外」の要素の取得

HTML

<input type="checkbox" name="hoge" value="a">
<input type="checkbox" name="hoge" value="b" id="ignore">
<input type="checkbox" name="hoge" value="c">

JS

<script>
var $hoge = $("[name$=hoge]").not("#ignore");
$hoge.each(function(){
    console.log($(this).val());
});
</script>

実行結果

a
c