デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

複数の属性複数の属性セレクタ(AND選択)

構文

複数の属性セレクタ全てにマッチする要素を選択(AND選択)
$("[属性セレクタ][属性セレクタ][属性セレクタ]…")ver1.0〜

機能

属性セレクタを連結することで、複数の属性セレクタにマッチした要素を選択(AND選択)します。各[ ]の間にスペースを挟んではいけません。OR選択したい場合は複数のセレクタ(or)を利用します。

解説

AND選択です

サンプル(multiple-attribute/01.html)を開いてbody内にdiv要素が4つあることを確認してください。div要素にはid属性やclass属性が設定されています。着目するのは上から3つ目のdiv要素で、ここにはclass属性とid属性が両方設定されています。

<div>div</div>
<div class="test">class属性が「test」のdiv</div>
<div class="test" id="sample">class属性が「test」、id属性が「sample」のdiv</div>
<div id="sample">id属性が「sample」のdiv</div>

jQueryは以下の様に記述され、セレクタには[属性名]が2つあり、id属性とclass属性が設定されています。AND選択なので、buttonをクリックするとid属性とclass属性が両方存在する3番目のdiv要素が選択され、cssメソッドによって背景色が緑になります。

$("button").click(function(){
	$("[class][id]").css("background-color","#9f9");
});

組合せは色々

サンプル(multiple-attribute/02.html)を開いてbody内にdiv要素が4つあることを確認してください。div要素には上から順に「test_sample_01」「sample_test_01」「test_sample_02」「sample_test_02」とclass属性が設定されています。

<div class="test_sample_01">class属性が「test_sample_01」のdiv</div>
<div class="sample_test_01">class属性が「sample_test_01」のdiv</div>
<div class="test_sample_02">class属性が「test_sample_02」のdiv</div>
<div class="sample_test_02">class属性が「sample_test_02」のdiv</div>

jQueryは以下の様に記述され、buttonをクリックすると[属性名^="値"]とに[属性名$="値"]のセレクタを利用し、class属性が「sample」で始まり「01」で終わる値の要素を選択します。

$("button").click(function(){	
	$("[class^='sample'][class$='01']").css("background-color","#9f9");
});

結果として、buttonをクリックすると上から2番目のdiv要素(class属性の値は「sample_test_01」)が選択され背景色が緑になります。

関連項目

別カテゴリとしてページを分けていますが、この構文や機能は複数のセレクタ(and)と同じです。

メモ

OR選択したい場合は?

AND選択ではなくOR選択にしたい場合は、複数のセレクタ(or)を利用します。
サンプル(multiple-attribute/test01.html)を開いてbody内の構成はmultiple-attribute/01.htmlから変更がないことを確認して下さい。jQueryは以下の様に各属性セレクタを,(カンマ)で区切って指定します。これでid属性かclass属性を持つ要素が選択されます。

$("button").click(function(){
	$("[class] , [id]").css("background-color","#9f9");
});

結果として、buttonをクリックすると(id属性もclass属性も無い)一番上のdiv要素以外はすべて選択され、背景色が緑になります。