jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > 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) による指定
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門