HTMLで動的にクラス名をつける

HTMLでeachやtimesで同じクラスを複数個作成した時に一つだけに別のcssを当てたくなるような状況が出てきたので、いっそのこと繰り返し処理中に異なるクラス名を動的に作成できないかと思ってやってみました。

どんな状況か

よく見ると、２つの箱の重なる部分の線が太くなっています。
cssは箱のborderを囲うものを当てています。
この２つの箱は同じクラス名で、cssも同じものを当てているためこうなってしまいました。

実際のコード

sample.html.haml

 - 2.times do |number|
   .history_single__category
     - case number
     - when 0
       = rec.donation_day
     - when 1
       = rec.inspection_method

このように、timesで2回同じクラスを作成しています。
そのため、上の図のようなことになっているので、動的にクラス名をつけてみたいと思います。

対策

sample.html.haml

 - 2.times do |number|
   .history_single__category{class: "category#{number}"}
     - case number
     - when 0
       = rec.donation_day
     - when 1
       = rec.inspection_method

sample.scss

 .category1 {
   border-left: none;
 }

今回の場合は、timesでnumberという変数を宣言しているので、それを使って２行目のようにクラスを動的に作成しています。
あとは、cssで２番目のクラス(今回の場合だとcategory1)に左のボーダーを消すようなcssを当てると、

このように他の部分と同じ線の太さにすることができました。

他にも

sample.html.haml

 - @records.each.with_index(1) do |record, i|
   .sample{class: "result#{i}"}

each_with_indexでも同じように使うことができます。
また、番号が0から始まるのがわかりづらいときはこのように1から始まるように指定してあげたほうが良いのかもしれません。