jQuery逆引きリファレンス
属性値で目的の要素を絞り込むには？ ― 属性フィルター
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致／部分一致／複数一致などが指定できる。
$()関数では、特定の属性を持つもの、あるいは属性の値によって、目的の要素を絞り込むこともできます。属性による条件式（＝属性フィルター）は、[条件式]の形式で指定します。
本稿では、属性フィルターで利用できるさまざまな条件式について解説します。
1特定の属性を持つ要素だけを取得する
[属性名]の形式で、特定の属性を持つ要素だけを取得できます（値の有無、内容は関係ありません）。例えば以下は、「selected属性を持つ<option>要素」（＝デフォルトの選択値）の背景色を変更する例です。selected属性は、いわゆるブール属性（指定されていればtrue）なので、[属性名]の形式で指定するのが適当です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<select name="book">
<option value="">--＜書籍を選択してください＞--</option>
<option value="docker">プログラマのためのDocker教科書</option>
<option value="js" selected>JavaScript逆引きレシピ</option>
<option value="android">アプリを作ろう！ Android入門</option>
<option value="jq">10日でおぼえるjQuery入門教室 第2版</option>
<option value="ecma">速習 ECMAScript 6</option>
</select>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$('option[selected]').css('background-color', 'Yellow');
});
</script>
</body>
</html>
|
2属性値が、ある値に等しい／等しくない要素だけを取得する
属性値が、ある値に等しい要素だけを取り出すには、[属性名 = "値"]というフィルターを利用します。例えば以下は、value属性が空である<option>要素にだけ背景色を付与する例です。
|
<select name="book">
<option value="">--＜書籍を選択してください＞--</option>
<option value="docker">プログラマのためのDocker教科書</option>
<option value="js_recipe">JavaScript逆引きレシピ</option>
<option value="android">アプリを作ろう！ Android入門</option>
<option value="js_jquery">10日でおぼえるjQuery入門教室 第2版</option>
<option value="ecma">速習 ECMAScript 6</option>
</select>
……中略……
<script>
$(function() {
$('option[value=""]').css('background-color', 'Yellow');
});
</script>
|
もしも属性が指定された値に等しくないものを取り出したいならば、[属性名 != "値"]フィルターを利用します。試しに、先ほどのリスト2を以下のように書き換えてみましょう。今度は、value属性が空でない<option>要素だけに背景色が付与されます。
|
$(function() {
$('option[value!=""]').css('background-color', 'Yellow');
});
|
3属性値が部分的に一致する要素だけを取得する
2では属性値が完全一致する例について触れましたが、部分一致条件で検索することもできます。具体的には、以下のフィルターを利用します。
| フィルター | 概要 |
|---|---|
| [属性名^="値"] | 属性値が指定された値で始まる要素を取得（前方一致） |
| [属性名$="値"] | 属性値が指定された値で終わる要素を取得（後方一致） |
| [属性名*="値"] | 属性値に指定された値が含まれる要素を取得（部分一致） |
例えば以下は、value属性が「js」で始まる<option>要素に背景色を付与する例です。
|
<select name="book">
<option value="">--＜書籍を選択してください＞--</option>
<option value="docker">プログラマのためのDocker教科書</option>
<option value="js_recipe">JavaScript逆引きレシピ</option>
<option value="android">アプリを作ろう！ Android入門</option>
<option value="js_jquery">10日でおぼえるjQuery入門教室 第2版</option>
<option value="ecma">速習 ECMAScript 6</option>
</select>
……中略……
$(function() {
$('option[value^="js"]').css('background-color', 'Yellow');
});
|
4複数の属性フィルターを組み合わせる
[...][...]のように、属性フィルターを連ねることもできます。例えば以下は、value属性が「js」で始まり、かつ、「jq」というキーワードを含んだ<option>要素の背景色を付与する例です。
|
<select name="book">
<option value="">--＜書籍を選択してください＞--</option>
<option value="docker">プログラマのためのDocker教科書</option>
<option value="js_recipe">JavaScript逆引きレシピ</option>
<option value="android">アプリを作ろう！ Android入門</option>
<option value="js_jquery">10日でおぼえるjQuery入門教室 第2版</option>
<option value="ecma">速習 ECMAScript 6</option>
</select>
……中略……
$(function() {
$('option[value^="js"][value*="jq"]').css('background-color', 'Yellow');
});
|
ここではvalue属性に対して複数の条件を指定していますが、もちろん、異なる属性に対して条件指定することもできます。
API：jQuery()｜$() カテゴリ：Core（コア）
処理対象：属性 カテゴリ：セレクター
API：属性を持つ要素セレクター [name]｜属性値が完全一致する要素セレクター [name="value"]｜属性値が完全不一致な要素セレクター [name!="value"]｜属性値が前方一致する要素セレクター [name^="value"]｜属性値が後方一致する要素セレクター [name$="value"]｜属性値が部分一致する要素セレクター [name*="value"]｜複数属性セレクター [name="value"][name2="value2″] カテゴリ：Selectors（セレクター） > Attribute（属性）
※以下では、本稿の前後を合わせて5回分（第35回～第39回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
35. 非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx）
jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。
36. id値／タグ名／クラス名で特定の要素を取り出すには？ ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。
37. 【現在、表示中】≫ 属性値で目的の要素を絞り込むには？ ― 属性フィルター
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致／部分一致／複数一致などが指定できる。
38. 親子／兄弟関係にある要素を取り出すには？ ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素／子孫要素／直後の要素／以降の要素などを絞り込んで取り出す方法を説明する。
39. 登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター
jQueryの$()関数でフィルター構文を使い、先頭／末尾の要素や、偶数／奇数番目の要素、n番目／n番目より前や後の要素を取り出す方法を説明する。
