ホーム » jQuery の基礎 - セレクター » 属性 (Attribute) による指定
属性 (Attribute) による指定
ここでは DOM 要素の属性 (Attribute) をセレクターで指定する方法を、具体例を挙げて説明します。
上手に使い分ければあなたのコードがかなり減らせます。
数が多いので覚えるのは大変ですが、ざっと、なるほどこんな種類があるのか、と目を通しておき、必要に応じてこのページの例を参照してください。
属性に指定した値を含む要素を選ぶ
DOM 要素の属性に特定の値を含む要素を選ぶ場合は、 [属性の名前*="値"] とします。
例えば次のような住所入力フォームを考えます。ここでそれぞれの入力フィールドの name 値は address-1、address-2、city、state です。 ここから address-1 と address-2 の値だけ取り出したいとします。
Address1: | |||
Address2: | |||
City: | State: |
上の例では 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"]) とします。
ホーム » jQuery の基礎 - セレクター » 属性 (Attribute) による指定