jQueryで属性をセレクトする際に前方一致・後方一致・部分一致などができることを最近知りました。
IDやクラスを指定する方法や、完全一致( i.e : $(“[ 属性 = ‘値’ ]”) )しかしらなかった身としては衝撃的でした。
使えるようになると便利そうなので、自分なりにまとめてみます。
JSBinやCodePenなどを使ってコードを実行・確認しながら学んでいきましょう。
参考サイト：https://api.jquery.com/category/selectors/attribute-selectors/
- 属性セレクタ 前方一致
(Attribute Starts With Selector) - 属性セレクタ 後方一致
(Attribute Ends With Selector) - 属性セレクタ 部分一致
(Attribute Contains Selector) - 属性セレクタ ハイフン区切りで先頭一致(プリフィックス)
(Attribute Contains Prefix Selector) - 属性セレクタ (スペース区切り)単語一致
(Attribute Contains Word Selector) - 属性セレクタ 不一致の一致
(Attribute Not Equal Selector) - 属性の一致セレクタ
(Has Attribute Selector) - おわり
属性セレクタ 前方一致
(Attribute Starts With Selector)
指定した値が前方一致した属性を選択します。
前方一致 構文
$(“[ 属性 ^= ‘値’ ]“)
前方一致サンプルコード
HTMLサンプル
<body>
<button class=”test1″>ボタン1</button>
<button class=”test2″>ボタン2</button>
<button class=”test-block”>ボタン3</button>
</body>
クラスで前方一致
$(“[class^=’test’]”).css(“background-color”,”yellow”);
上記の場合class=”test1″(test2も)やclass=”test-block”なども「test」で前方一致するためまとめでcssを変更できます。
属性セレクタ 後方一致
(Attribute Ends With Selector)
指定した値が後方一致した属性を選択します。
後方一致 構文
$(“[ 属性 $= ‘値’ ]“)
後方一致サンプルコード
HTMLサンプル
<body>
<button id=”myValue”>ボタン1</button>
<button id=”yourValue”>ボタン2</button>
<button id=”hisValue”>ボタン3</button>
</body>
idで後方一致
$(“[id$=’Value’]”).css(“background-color”,”yellow”);
後方がValueのもの全てのbackground-colorが黄色になります。上記の場合は全てcssが反映されます。
属性セレクタ 部分一致
(Attribute Contains Selector)
指定した値が部分一致した属性を選択します。
部分一致 構文
$(“[ 属性 *= ‘値’ ]“)
部分一致サンプルコード
HTMLサンプル
<body>
<button id=”nm”>ボタン1</button>
<button id=”his_nm”>ボタン2</button>
<button id=”snmp”>ボタン3</button>
</body>
idで部分一致
$(“[id*=’nm’]”).css(“color”, “red”);
nmが含まれているidが全て選択されます。上記の場合だと全てCSSが反映されます。
属性セレクタ ハイフン区切りで先頭一致(プリフィックス)
(Attribute Contains Prefix Selector)
指定された文字列と等しいか、その文字列で始まりハイフン（-）が続く値をもつ指定した属性が選択できます。
ハイフン区切りで先頭一致(プリフィックス) 構文
$(“[属性|=’値’]”)
ハイフン区切りで先頭一致サンプルコード
HTMLサンプル
<body>
<a href=”example.html” hreflang=”ch-China”>中国語</a>
<a href=”example.html” hreflang=”en-UK”>English</a>
<a href=”example.html” hreflang=”ja-Ja”>日本語</a>
<a href=”example.html” hreflang=”ja”>日本語</a>
<a href=”example.html” hreflang=”test-ja”>日本語</a>
<a href=”example.html” hreflang=”japan”>日本語</a>
</body>
hreflangでハイフン区切りで先頭一致
$(“[hreflang|=’ja’]”).css(“color”, “red”);
上記の例ではaタグを指定してから属性を記述しています。※aなくても反映されます。
hreflangが「ja-Ja」と「test-ja」にcssが反映されます。「japan」にCSSが反映されないのがこのセレクタの面白いところです。
属性セレクタ (スペース区切り)単語一致
(Attribute Contains Word Selector)
このセレクタは、属性値の各単語に対して指定した文字列がスペースで区切られた文字列のいずれかの単語と等しい場合、一致します。
(スペース区切り)単語一致 構文
$(“[属性~=’値’]”)
(スペース区切り)単語一致サンプルコード
HTMLサンプル
<body>
<input name=”yes” value=”test1″>
<input name=”yes or no” value=”test2″>
<input name=”yesterday” value=”test3″>
<input name=”are-you-coming-yes” value=”test4″>
<input name=”love me yes” value=”test5″>
</body>
inputのnameで(スペース区切り)単語一致
$(“input[name~=’yes’]”).css(“border”, “solid”);
上記の例ではinputタグを指定してから属性を記述しています。※inputなくても反映されます。
inputのnameが「yes」、「yes or no」と「love me yes」のものにcssが反映されます。単語(yes)で選べているのがわかります。
属性セレクタ 不一致の一致
(Attribute Not Equal Selector)
指定された属性を持たない、または指定された属性を持っているが特定の値を持たない要素を選択します。
不一致の一致 構文
$(“[属性!=’値’]”)
不一致の一致 サンプルコード
HTMLサンプル
<body>
<input name=”none” value=”test1″>
<input name=”yes or no” value=”test2″>
<input name=”no” value=”test3″>
<input name=”no-way” value=”test4″>
</body>
inputのnameで不一致の一致
$(“input[name!=’no’]”).css(“border”, “solid”);
上記の例ではinputタグを指定してから属性を記述しています。※inputなくても反映されます。
inputのnameが「no」のもの以外にcssが反映されます。
inputなどを指定しないで「no」以外とすると影響範囲が広いのでタグを指定したほうが良さそうです。
属性の一致セレクタ
(Has Attribute Selector)
任意の値で、指定された属性を持つ要素を選択します。
最後にシンプルに属性を選ぶだけのパターンです。
属性の一致 構文
( “[属性]” )
属性の一致 サンプルコード
HTMLサンプル
<body>
<p id=”Hello” >abc</p>
<p class=”noId” >abc</p>
<p id=”hasId” >abc</p>
<p>abc</p>
</body>
id属性の一致
$(“[id]”).css(“border”, “solid”);
idの属性を持つものにCSSが反映されます。上記の場合は id=”Hello” と id=”hasId” を持っているpタグにCSSが反映されています。
おわり
見たことがなかったので、はじめ理解できず調べるのも一苦労でしたがいい勉強になりました。
和名は適当につけているものもありますので、さらに調べる場合は英語名で深堀したほうがいいかもしれないです。
間違い等ありましたらご指摘いただければ幸いです。
