each文で出力するそれぞれの要素に別々の背景色を適応させるには？

Question

each文で出力するそれぞれの要素に別々の背景色をランダムに適応させたいです。

下記のようにしてみたところ、ランダムで背景色を変化させることには成功したのですが、
すべてのnoteクラスに同じ背景色が適応されてしまいました。
noteクラスを一つ出力するごとにjqueryのスクリプトを実行させるにはどのようにすれば良いのでしょうか？

<% @notes.each do |note| %>
  <div class="note">
    <%= note.content %>
  </div>
  <script>
    bgc = new Array('red', 'blue', 'yellow');
    x = Math.floor(Math.random()*3)
    $('.note').css('background-color', bgc[x]);
  </script>
<% end %>

Answer 1

1つのクラスでは、当然無理ですので、このように複数のクラスの指定で対応すれば良いと思います。

<div class="note red"></div>
<div class="note blue"></div>
<div class="note yellow"></div>

.note {
 noteに対する共通のスタイル定義
}
/* 背景色は個別に用意 */
.red {
  background: #ff0000;
}
.blue {
  background: #0000ff;
}
.yellow {
  background: #ffff00;
}

この場合、jqueryでやる必要はなくなります。

<% @notes.each do |note|
     color = ['red', 'blue', 'yellow'].sort_by{rand}.first
%>
  <div class="note <%= color %>">
    <%= note.content %>
  </div>
<% end %>

Answer 2

わざわざJavaScriptで実行する必要もないです。Railsで生成してしまいましょう。

<% colors = %w|red green yellow #fcc| %>
<% @notes.each do |note| %>
  <%= content_tag :div, class: :note, 
      style: "background-color: #{colors.sample}" do %>
    <%= note.content %>
  <% end %>
<% end %>