jQuerの｢:even｣｢:odd｣の動作についてを詳しく
「Trevor Davis | Blog | jQuery Table Striping Bug」
というエントリーを読んで、
「これはバグなのか？仕様じゃなくて？」なんてことを思った。
前に「リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法」と
「テーブルで簡単かつ綺麗に格子状に色分けする方法」を書いたのですが、
jQueryの｢:even｣｢:odd｣について、再度動作の仕方を見てみようと思います。
基本的な動作の確認
まずは<ul>のまとまりが一つの時の動作で基本をおさえよう。
下のデモは各ボタンをクリックすると、該当の行の色が変わる。
動作の確認の為、｢:even｣｢:odd｣の他に、
｢:nth-child(even)｣と｢:nth-child(odd)｣も入れておく。
■デモ
- リスト１
- リスト２
- リスト３
- リスト４
- リスト５
まとまりが複数の場合
次に<ul>のまとまりが複数の時の動作をみてみよう。
よりわかりやすいように、各リストの数も違うのを用意した。
■デモ
- Aリスト１（通し番号１）
- Aリスト２（通し番号２）
- Aリスト３（通し番号３）
- Aリスト４（通し番号４）
- Aリスト５（通し番号５）
- Bリスト１（通し番号６）
- Bリスト２（通し番号７）
- Bリスト３（通し番号８）
- Bリスト４（通し番号９）
- Bリスト５（通し番号10）
- Bリスト６（通し番号11）
- Cリスト１（通し番号12）
- Cリスト２（通し番号13）
- Cリスト３（通し番号14）
- Cリスト４（通し番号15）
- Cリスト５（通し番号16）
- Cリスト６（通し番号17）
- Cリスト７（通し番号18）
｢:even｣｢:odd｣は全体の数に対して適応される
複数ある場合を見てもらえばわかるように、
｢:even｣｢:odd｣は全体の通し番号での奇数と偶数の場所に適応される。
それに対して｢:nth-child(even)｣と｢:nth-child(odd)｣は
それぞれのブロックの奇数と偶数で適応されるようになっている。
「Trevor Davis | Blog | jQuery Table Striping Bug」では
タイトル通りにバグと書いてあるが、これは単なるjQueryの仕様じゃないか？
いずれにせよ、それぞれの動作の違いは頭に入れておいた方がいいだろう。
関連エントリー：
