jQuery 01-05: インデックス番号

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

jQueryではhtml内の同じ要素を操作できるように番号が割り当てられます。
この番号をインデックス(番号)と呼びます。前回利用したセレクタの” : even”も、
このインデックス番号が偶数の時に選択されます。これは便利なのですが、きちんと
理解していないと思うように利用できないので、今回はインデックス番号について説明します。

まずは本当にインデックス番号が割り当てられているのかを確認しましょう。
以下のサンプルではテーブルのtdにtrのインデックス番号を表示するようにしたサンプルです。
http://www.designdrill.jp/jquery/01/step08.html

ソースにはコメントで解説がありますが、これは現時点では覚える必要はありません。
前回も説明しましたが、最初の注意点はインデックス番号は0から始まるという点です。
だから前回、偶数の行に色を付ける処理で、最初の行に色がついたのです。
 

●インデックス番号はページを通して連番で割り当てられる

あと注意すべきことは、各要素にはそのページを通して番号が振られることです。
分かりにくいので、問題のあるサンプルで確認しましょう。
step09.htmlのjQueryのコードは前回のサンプルstep07.htmlと全く同じです。
ただテーブルが2つあります。注意すべきは2つめのテーブルは最初の行に色がついておらず、
次の行に色がついており最初のテーブルと色の付き方が逆になっている点です。
http://www.designdrill.jp/jquery/01/step09.html
前回のサンプルstep07.html
 
各テーブルとも最初の行に色を付けたいのに、何故このようになったかを考えます。
この問題を解く鍵はインデックス番号がページを通して振られることです。
step08.html同様にstep09.htmlにもインデックス番号を表示するようにしたサンプルを
用意したので確認してください。
http://www.designdrill.jp/jquery/01/step09b.html

tdのインデックス番号はテーブル毎に0から始まるのではなく、ページを通して
割り当てられるのです。そのため2つめのテーブルの行(tr)は9(奇数)から始まるのです。
そのために1つ目のテーブルと異なってしまったのです。
 
この問題を解決するのは意外と単純です。各テーブル毎にidを付けて、そのid毎のtrに
色を設定すればよいのです。実際に問題を解決したstep10.htmlのソースを確認してください。
ポイントは各テーブルタグにidで名前を付けている点と、jQueryのセレクタの部分でidの指定
を追加している点です。
http://www.designdrill.jp/jquery/01/step10.html
各テーブルとも、きちんと先頭の行に色がついているのを確認できます。
インデックス番号で今回のような問題にあったら、このようにidを追加して対応すると
良いでしょう。
 
 

●ついでにaddClassの紹介

前回/今回はcssメソッドを利用してhtmlの要素にcssを指定しましたが、他にも方法が
あるので、ついでに紹介しておきます。利用するのはaddClassというメソッドです。
リファレンス:addClass(class)メソッド
 
これを利用するとセレクタで指定した部位に、引数で指定したcssのクラスを設定する
ことができます。以下のサンプルを開いてソースを確認してください。
http://www.designdrill.jp/jquery/01/step11.html

このサンプルを開き、ソースのhead領域にcssが設定(クラスでtr-even)されていることを
確認してください。続いてjQueryの部分でtrの偶数行にaddClassメソッドでcssのクラス
tr-evenが設定されていることを確認しましょう。
複雑なcssのクラスを設定したい場合は、こちらのほうがソースが見やすくなるでしょう。

さらについでに、奇数行にも別のcssを割り当てたサンプルを紹介します。
奇数行の選択はセレクタの「: odd」を利用します。
リファレンス::oddセレクタ
http://www.designdrill.jp/jquery/01/step12.html
 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


四 + 7 =


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>