THE HAM MEDIA BLOG

jQuerの「:even」「:odd」の動作についてを詳しく

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
ODD
Even

jQuerの「:even」「:odd」の動作についてを詳しく

Trevor Davis | Blog | jQuery Table Striping Bug
というエントリーを読んで、
「これはバグなのか?仕様じゃなくて?」なんてことを思った。

前に「リストやテーブルを簡単かつ綺麗にストライプ状に色分けする方法」と
テーブルで簡単かつ綺麗に格子状に色分けする方法」を書いたのですが、
jQueryの「:even」「:odd」について、再度動作の仕方を見てみようと思います。



基本的な動作の確認

まずは<ul>のまとまりが一つの時の動作で基本をおさえよう。

下のデモは各ボタンをクリックすると、該当の行の色が変わる。
動作の確認の為、「:even」「:odd」の他に、
「:nth-child(even)」と「:nth-child(odd)」も入れておく。

■デモ

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

まとまりが複数の場合

次に<ul>のまとまりが複数の時の動作をみてみよう。

よりわかりやすいように、各リストの数も違うのを用意した。

■デモ

  • Aリスト1(通し番号1)
  • Aリスト2(通し番号2)
  • Aリスト3(通し番号3)
  • Aリスト4(通し番号4)
  • Aリスト5(通し番号5)
  • Bリスト1(通し番号6)
  • Bリスト2(通し番号7)
  • Bリスト3(通し番号8)
  • Bリスト4(通し番号9)
  • Bリスト5(通し番号10)
  • Bリスト6(通し番号11)
  • Cリスト1(通し番号12)
  • Cリスト2(通し番号13)
  • Cリスト3(通し番号14)
  • Cリスト4(通し番号15)
  • Cリスト5(通し番号16)
  • Cリスト6(通し番号17)
  • Cリスト7(通し番号18)

「:even」「:odd」は全体の数に対して適応される

複数ある場合を見てもらえばわかるように、
「:even」「:odd」は全体の通し番号での奇数と偶数の場所に適応される。

それに対して「:nth-child(even)」と「:nth-child(odd)」は
それぞれのブロックの奇数と偶数で適応されるようになっている。

Trevor Davis | Blog | jQuery Table Striping Bug」では
タイトル通りにバグと書いてあるが、これは単なるjQueryの仕様じゃないか?

いずれにせよ、それぞれの動作の違いは頭に入れておいた方がいいだろう。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。