jQueryの属性セレクタ【現役エンジニアが解説】

PROGRAM

今回は、jQueryの属性セレクタについて、簡単に解説していきます。

完全一致

jQueryの属性セレクタにはいくつかの指定方法があります。

例えば、以下のclass属性の値がhogeの要素があると想定します。

<div class="hoge"></div>

すると、下記のように指定することで、完全一致でこの要素を取得できます。

$('[class=hoge]')

前方一致

一致の条件を変えることができます。

今回は以下の二つのdiv要素を想定します。

<div class="div-a"></div>
<div class="div-b"></div>

下記のように指定すると、この二つの要素を前方一致で取得可能です。

$('[class^=div]')

後方一致

後方一致も可能です。

以下の二つのdiv要素を想定します。

<div class="a-div"></div>
<div class="b-div"></div>

下記のように指定することで、二つの要素を後方一致で取得できます。

$('[class$=div]')

部分一致

部分一致もできます。

下記の二つのdiv要素を想定します。

<div class="a-div-element"></div>
<div class="b-div-element"></div>

以下のように指定することによって、二つの要素を部分一致で取得可能です。

$('[class*=div]')