jQuery入門講座使い方-インデックス番号

インデックス番号

html内の要素はインデックス番号で管理されている

jQueryではhtml内の同じ要素を個別に操作できるように番号が割り当てられています。この番号のことをインデックス番号と呼びます。前回利用したnth-childも、このインデックス番号を利用して操作対象を選択するのです。

このインデックス番号は人間には分かりにくいため、前回の最初のサンプル（01/04_01.html）のようにcssのid（又はclass）を利用した方が分かりやすいです。しかしインデックス番号は要素にidやclassを付けなくても利用できるため、書く文字量を少なくできるというメリットがあります。

変わったインデックス番号の指定方法

また、今回紹介するodd（奇数）やeven（偶数）のような特殊な設定ができるのもメリットの１つでしょう。サンプル（01/05_01.html）を開いてソースを確認して下さい。テーブルがあり、htmlによるcssの設定はされていません。これにjQueryの疑似要素（:even）を利用して偶数行だけ背景色を設定しています。jQueryのcssメソッドを利用すると、セレクタで指定した要素にスタイルシートを当てることができます。今回はcssメソッドを利用しますが、複雑なcssを設定する場合はaddClassメソッドを利用した方がシンプルに記述できます。リファレンスのサンプルで違いを確認して下さい。

jQuery(document).ready(function () {
	jQuery("tr:even").css("background-color", "#c2dfed");
});

css3でもevenやoddの設定がありますが、cssではnth-childの引数に設定します。しかしjQueryでは上記のように要素に直接つなげて設定します。利用する単語は同じなのに構文が違うので注意しましょう。

インデックス番号は0から始まる

サンプルを良く確認すると、おかしな点に気が付きます。セレクタではeven（偶数）を設定したのに、着色された行は奇数になっています。しかし、これはバグではありません。ここで覚えるべき事は インデックス番号は0から始まるということです。つまり行は０行目から始まっているのです。分かりやすいようにテーブル内の文字を修正したサンプル（01/05_02.html）を用意したので確認して下さい。この考え方であれば、evenがきちんと偶数を指していることが理解できると思います。

捕捉：本当はCSS3同様にnth-childにevenやoddを設定できます

実はjQueryでもcss3と同じようにnth-childにevenやoddを設定できます。サンプル（01/05_03.html）を開いてソースを確認して下さい。以下の様にcss3と同じ構文で設定されています。

jQuery(document).ready(function () {
	jQuery("tr:nth-child(even)").css("background-color", "#c2dfed");
});

次に、どの行が着色されているか確認して下さい。気付いたでしょうか？この構文だと0からではなく１から始まるように考えるのです。これもcss3の考え方に合わせて結果なのです。まったくややこしいのですが、以下の様に覚えておきましょう。

インデックス番号 (index number): 要素を管理している番号（0から始まることに注意）。セレクタにはclassやidを付けた方が分かりやすいのですが、インデックス番号を利用するとclassやidDを設定せずにすむので文字量を減らすことができます。
注意点としてcss3の構文に従うケース（nth-child等）では0からでなく1から始まります。

インデックス番号はページを通して割り当てられます

インデックス番号はhtmlファイル内の各要素に連番で割り当てられます。当たり前なのですが、慣れていないと混乱する場合があるので、もう少し詳しく説明しておきます。サンプル（01/05_04.html）を確認して下さい。

jQueryは変えずにテーブルを２つに増やしただけです。１つ目と２つ目の色が付いている行を比較して下さい。セレクタには:evenが設定されているのに、２つ目のテーブルは奇数行に背景色が設定されています。しかし、これはページを通して連番で割り当てられていることを理解していれば納得できます。分かりやすいようにテーブルの内容を書き換えたサンプル（01/05_05.html）を用意したので開いて確認して下さい。

インデックス番号はページを通して振られているので、テーブルが２つ有ってもサンプルのように連番で設定されるのです。慣れないうちは混乱しがちなので気を付けましょう。

この問題を解決する方法は色々あるのですが、一番安直な方法は各テーブルにidを付けて対処する方法です。サンプル（01/05_06.html）を開いて確認して下さい。各テーブルにはtable01/table02とidが設定されています。このidをjQueryのセレクタに加えることでテーブル毎に偶数行に着色できます。

jQuery(document).ready(function () {
	jQuery("#table01 tr:even").css("background-color", "#c2dfed");
	jQuery("#table02 tr:even").css("background-color", "#c2dfed");
});

この方法は簡単ですが、テーブルの数が多い場合にidをそれぞれに付けなければならず手間が掛かります。そこで利用するのが:nth-childの引数にoddを利用した方法です。
※:nth-childでは要素番号が1から始まるので:evenと合わせるためにoddを利用します。

サンプル（01/05_07.html）を開いて、各tableにidが設定されていないことを確認して下さい。jQueryは以下の様にセレクタを設定しました。:nth-childは親要素毎に要素番号が割り振られるので、テーブル毎に奇数や偶数を設定してくれます。

jQuery(document).ready(function () {
	jQuery("tr:nth-child(odd)").css("background-color", "#c2dfed");
});

サンプル（01/05_06.html）とサンプル（01/05_07.html）を比較して同じ行が選択されていることを確認してください（要素番号が始まる数が異なるのでtd内の文字内容は異なっています）。

次のページ：jQueryの省略構文