2015年11月18日水曜日

リピーターにバインドしたデータの奇数個目と偶数個目で異なるクラスのCSSをあてる方法

こんばんはSです!

長いタイトルの通り、今日は
【リピーターにバインドしたデータの奇数個目と偶数個目で異なるクラスのCSSをあてる方法】
についてです♪

こういうときに役に立つのが%で、下記のように書くと上手くいきます。

<li class='<%# (((Container.ItemIndex % 2) == 1) ? "even" : "")%>'>
※even : 偶数個目にだけ適用するCSSのクラス名
(奇数個目じゃない?と思った方は私と同じ罠にはまっています笑)

▼イメージ

<li >aaa</li>
<li  class='even'>aaa</li>
<li >aaa</li>
<li  class='even'>aaa</li> ・・・


3 件のコメント:

  1. C#のRepeaterコントロール内では、

    Container.ItemIndex

    で今の順番(何順目のループか)が分かる。
    で、この数値は、0から始まる。 ⇒ 一週目は「0」になる。

    ので、この数値を2で割った時の余りが、1であれば偶数番目、ということだね。

    Container.ItemIndexの値 ループの周回数 Container.ItemIndexの値を2で割った余り
    0 1 0
    1 2 1
    2 3 0
    3 4 1
    4 5 0
    5 6 1

    返信削除
    返信
    1. そうなんです!!
      割り算の話になるとついつい1から始めたくなってしまいますが
      0からというところがポイントですよね!

      削除
  2. このコメントは投稿者によって削除されました。

    返信削除