Web制作の現場で使えるjQuery　UIデザイン入門 ― 第4回

初めてのjQuery：セレクターAPIを一挙解説（後編） (2/5)

■[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要素が赤色になります。