Sometimes you need to keep track of how many times you’ve looped when rending some views, for instance to alternate background colors to create a “striped” table.
<!-- @foods = ["apple", "orange", "banana"] -->
<% @foods.each do |food| %>
<tr class="???">
<td><%= food %></td>
</tr>
<% end %>
You might try using :odd or :even CSS child selectors or switching to each_with_index.
<% @foods.each_with_index do |food, i| %>
<tr class="<%= i % 2 == 0 ? 'bg-gray-200' : 'bg-gray-100' %>">
<td><%= food %></td>
</tr>
<% end %>
You could even refactor a bit to use i.odd? or i.even?.
<% @foods.each_with_index do |food, i| %>
<tr class="<%= i.even? ? 'bg-gray-200' : 'bg-gray-100' %>">
<td><%= food %></td>
</tr>
<% end %>
Rails offers a different helper that comes in handy for these situations: cycle.
Usage
The cycle helper takes an array of arguments and loops through them each time it is called.
We could replace the above code with:
<% @foods.each_with_index do |food, i| %>
<tr class="<%= cycle('bg-gray-200', 'bg-gray-100') %>">
<td><%= food %></td>
</tr>
<% end %>
The real benefits start to appear if you need more than two options.
<% @foods.each_with_index do |food, i| %>
<tr class="<%= cycle('bg-red-100', 'bg-orange-100', 'bg-yellow-100') %>">
<td><%= food %></td>
</tr>
<% end %>
If you need to manually reset or share a cycle between code, you can pass a name: key as an option.
cycle("red", "white", "blue", name: "colors")
cycle("sm", "md", "lg", "xl", name: "sizes")
reset_cycle("colors")
reset_cycle("sizes")
You can also use any object that responds to to_s in the cycle.
<% @items.each do |item| %>
<div class="rotate-<%= cycle(0, 45, 90, 135, 180) %>">
<%= item %>
</div>
<% end %>
Additional Resources
Rails API Docs: TextHelper#cycle
Tailwind Docs: Even/odd variants
Top comments (0)