jQueryで知っていると便利なセレクタ指定方法

個人的には、ほとんどのサイトで使われているのでは無いかと思っているjQueryですが、プログラムを発動させるセレクタ指定が簡単に出来るのも魅力の1つです。
要素の名前やid名、class名などで指定するのは基本だと思いますが、他にも色々便利な指定方法があります。その中でも個人的に良く使う指定方法をご紹介します。

基本指定

各指定方法の出力の参考に、下記htmlの要素をサンプルとして利用します。

<div id="section1">
  <ul>
    <li class="a">11</li>
    <li class="b">12</li>
    <li>13</li>
    <li>14<ol>
      <li>141</li>
    </ol></li>
  </ul>
</div>

［水色エリアを横スライドで続きが表示されます］

1. 複数指定

要素やid名,class名などが違うけれども、同じ処理を実行したいという時の指定方法です。通常指定する記述を「,」(カンマ)で区切る事で、複数指定が可能となります。

$( '.a, .b' );

［水色エリアを横スライドで続きが表示されます］

この場合は「class="a"」と「class="b"」要素が対象となります。

2. 子指定

ある要素の中にある、特定の子要素のみを指定したい時に使います。孫要素以下が対象外となるので、同じ要素が複数階層に渡って存在する場合に便利です。

$( '#section1 > ul > li' );

［水色エリアを横スライドで続きが表示されます］

id="section1"の ul 要素の li 要素が対象となります。141を囲う li 要素は指定の階層よりもう一段深くなるので対象外となります。

先祖指定

ある要素の先祖を指定。parentだと親のみになるが、paremtsとすると親より上位階層の要素も対称となります。

$( '.a' ).parents('#section1');

［水色エリアを横スライドで続きが表示されます］

この場合はparentsの複数指定なので、class="a"を内包する ul 要素と div 要素が対象となります。

○番目指定

例えば li 要素の3番目を指定したい場合「eq()」を使います。li 要素など複数を存在する要素指定は、何番目と言うのが抜けている為に予期せぬ動きをする事があります。結構重要な指定方法だと個人的には思っています。

$( 'li' ).eq(2);

［水色エリアを横スライドで続きが表示されます］

この指定の場合は、li 要素の3番目を指定している事になるので、13の値を持つ li 要素が対象となります。

フォーム関連指定

フォーム関連の指定も色々と便利な方法での指定が可能です。下記htmlの要素をサンプルとして利用します。

<form>
  <input type="text" name="input" value="50">
  
  <input id="rd1" type="radio" name="radio" value="r1">
  <input id="rd2" type="radio" name="radio" value="r2" checked="checked">
  
  <input type="checkbox" name="checkbox" value="c1">
  <input type="checkbox" name="checkbox" value="c2" checked="checked">
  
  <select name="selectbox">
    <option value="s1">s1</option>
    <option value="s2" selected="selected">s2</option>
    <option value="s3">s3</option>
  </select>
</form>

name属性指定

name指定で要素を呼び出すことが出来ます。id指定する必要がないので、Form操作の際は便利です。

$( '[name="input"]' ).val();

name="input"となっている value の値を取得しているので、50が返ってきます。

選択状態指定

ラジオボタンやチェックボックスなどの選択されたものを取得します。ラジオボタン、チェックボックス、セレクトボックスの選択されているものを指定する方法です。

$( '[name="radio"]:checked' ).val();
$('[name="checkbox"]:checked').val();
$('[name="selectbox"] option:selected').val();

それぞれ選択された value の値を取得しているので、上から順に「r2」「c2」「s2」の結果が返ってきます。

変数を利用した指定

id名などが連番となっている場合、for文などを利用して要素していしたい時に、変数を用いた計算式で指定も可能です。この指定方法は何かと重宝します。

for ( i=1; i<=$('[name="radio"]').length; i++ ) {
  $( '#rd' + i ).val();
}

radioボタンの指定を '#rd' + iという形で、文字列+変数と言う形で指定している点がポイントです。この場合はid名 rd1 と rd2 の valueの値を取得しているので、「r1」「r2」の結果が返ってきます。

他にも除外指定や、CSSの:first-childように最初の要素だけといった指定など様々な指定方法がありますので、ご自身で使いやすい設定をまとめておくと作業効率が上がると思います。