属性 (Attribute) による指定

ここでは DOM 要素の属性 (Attribute) をセレクターで指定する方法を、具体例を挙げて説明します。

上手に使い分ければあなたのコードがかなり減らせます。

数が多いので覚えるのは大変ですが、ざっと、なるほどこんな種類があるのか、と目を通しておき、必要に応じてこのページの例を参照してください。

属性に指定した値を含む要素を選ぶ

DOM 要素の属性に特定の値を含む要素を選ぶ場合は、 [属性の名前*="値"] とします。

例えば次のような住所入力フォームを考えます。ここでそれぞれの入力フィールドの name 値は address-1、address-2、city、state です。 ここから address-1 と address-2 の値だけ取り出したいとします。

上の例では input 要素は次のように書かれており・・・ (スタイル指定は一部省略)

<input class='ex1' type='text' name='address-1' value='12345 Street'>
<input class='ex1' type='text' name='address-2' value='Ste A'>
<input class='ex1' type='text' name='city' value='Los Angeles'>
<input class='ex1' type='text' name='state' value='CA'>

それに対して、次のコードで Address1 と Address2 を取得しています。

$('#button1').click(function(){
	$.each( $('input.ex1[name*="address"]'), function(a,b){
		alert(b.value);
	});
});

セレクターは $( 'input.ex1[name*="address"]') と指定されています。

属性が指定した値で始まる、または終わる要素を取得する

属性が指定した値で始まる要素だけ取り出すことも可能です。例えば 上の例で name 属性が c で始まる要素は、 name='city' ですが、 これを指定するには次のように ^ を使って $('input.ex1[name^="c"]) とします。

同様に指定した値で終わる、という条件ならば、 $ を使って $('input.ex1[name$="e"]) とします。