Rails CSS 斑马条纹行，但以三行为一组

Question

我所知道的： Rails 具有 cycle() 方法，该方法允许表中的奇数/偶数行具有不同的 CSS 类。我们可以将多个类传递给 Cycle() 方法，效果很好。

我想要以三为一组的行；所以，我使用了这个：

...some html-table  code...
<tr class="<%= cycle("table_row_1","table_row_2","table_row_3","table_row_4","table_row_5","table_row_6") %>">
...some more html-table  code...

我定义的相应CSS是：

.table_row_1 { background-color: red;}
.table_row_2 { background-color: red;}
.table_row_3 { background-color: red;}
.table_row_4 { background-color: blue;}
.table_row_5 { background-color: blue;}
.table_row_6 { background-color: blue;}

它可以工作，但感觉不“干净”。

Rails 有推荐的方法吗？

更新

1. 与@Ryan Bigg的回答类似，是否可以按顺序生成字符串，以便cycle()方法可以发送prefix_1 prefix_2 prefix_3 以某种方式使用 *3 语法或其他方式？
2. 使用这种“每隔三行”条纹的灵感来自 Edward Tufte 网站上的文章
3. 看来 CSS3 可以做到这一点 (链接），但目前尚未得到广泛支持:(
4. 与问题无关，但我只是在Google上搜索了这个问题，以及 questionhub.com！我从来没有在 Questionhub.com 上问过这个问题！
5. 现在它在 http://loopingrecursion.com 也是！这是怎么回事。

Answer 1

这个怎么样？

<tr class="<%= cycle(*[["striped"]*3,["unstriped"]*3].flatten) %>">

Answer 2

实际上，这听起来像是我会使用纯 CSS 来解决的问题：

table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3) { background:red;} 
table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n)   { background:blue;} 

虽然这很短而且花哨，但这个 在 IE 中不起作用（它将在新的 IE9 中起作用）。

要实现此功能，您可以使用 jQuery，它提供相同的选择器并且完全跨浏览器兼容。

在你的CSS中，你添加两个类：

table_row_third_even { background: red;}
table_row_third_odd { background: blue;}

然后你编写一些JavaScript（例如在application.js中），像这样

$(function() {
  $('table tr:nth-child(6n+1), table tr:nth-child(6n+2), table tr:nth-child(6n+3)').addClass('table_row_third_even');
  $('table tr:nth-child(6n+4), table tr:nth-child(6n+5), table tr:nth-child(6n)').addClass('table_row_third_odd');
});

，你的表必须有类highlight（您应该将其更改为更合适的名称，这只是一个示例）；但没有任何特定于您的 tr 标记的内容，因为它们将由 javascript 代码添加。

<table class='highlight'>
  <tr> ... </tr>
  <tr> ... </tr>
  <tr> ... </tr>
  <tr> ... </tr>
</table>

但要实现此功能，您需要在项目中引入 jQuery。好处是：它可以让您的 ruby​​ 代码免受执行此操作所需的混乱的影响。

希望这有帮助！

Answer 3

我找到了一种方法来做到这一点，这种方法有点“干净”并且目前适合我。详细信息：

在控制器助手中（还没有错误检查！）：

def cycle_every_third(options = [])
  cycle(options[0],options[0],options[0],options[1],options[1],options[1])
end

HTML：

...
<tr class="<%= cycle_every_third(["table_row_1","table_row_2"] ) %>">
...

CSS：

.table_row_1 {   background-color: red;}
.table_row_2 {   background-color: blue;}

我想知道这是解决这个问题的好方法吗？我可能没有意识到 Rails 中在辅助方法中调用 Cycle() 的陷阱，而不是在 rhtml/erb 文件中调用它？