■[attribute^='value']
特定の属性の値が、特定の文字列で始まっている要素を指定できます。
▼サンプルコード(HTML部分)
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード(スクリプト部分)
$(function(){
$("[title^='f']").css("color","red");
})
▼実行結果(実際のWebページ)
title属性の値がfで始まる文字列である要素、つまり1行目と4行目のli要素が赤色になります。
■[attribute$='value']
特定の属性の値が、特定の文字列で終わっている要素を指定できます。
▼サンプルコード(HTML部分)
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード(スクリプト部分)
$(function(){
$("[title$='d']").css("color","red");
})
▼実行結果(実際のWebページ)
title属性がdで終わっている文字列である要素、つまり2行目と3行目のli要素が赤色になります。
■[attribute*='value']
特定の属性が、特定の文字列を含んでいる要素を指定できます。
▼サンプルコード(HTML部分)
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード(スクリプト部分)
$(function(){
$("[title*='ir']").css("color","red");
})
▼実行結果(実際のWebページ)
title属性がirを含む文字列である要素、つまり1行目と3行目のli要素が赤くなります。
■[attributeFilter1][attributeFilter2]
複数の属性セレクターを同時に指定することもできます。
▼サンプルコード(HTML部分)
<ul>
<li title="first">テキストテキストテキストテキストテキスト</li>
<li title="second">テキストテキストテキストテキストテキスト</li>
<li title="third">テキストテキストテキストテキストテキスト</li>
<li title="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード(スクリプト部分)
$(function(){
$("[title^='f'][title*='th']").css("color","red");
})
▼実行結果(実際のWebページ)
title属性がfから始まり、かつtitle属性にthが含まれる文字列である要素、つまり4行目のli要素が赤色になります。
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。