Ruby on rails Rails奇偶If语句

我的活动模型有一个循环

<% @activities.each do |activity| %>
<div>
    <div class="cell">
        <%= image_tag(activity.image) %>
    </div>
    <div class="cell">
        <h4><%= activity.title %></h4>
        <p><%= activity.description %></p>
        <span><%= activity.distance %></span>
    </div>
</div>
<% end %>  

我想创建一个Z字形效果，因此我需要为每个偶数活动重新安排HTML，因此标记将如下所示：

<div>
  <div class="cell">
    <h4><%= activity.title %></h4>
    <p><%= activity.description %></p>
    <span><%= activity.distance %></span>
  </div>
  <div class="cell">
    <%= image_tag(activity.image) %>
  </div>
</div>

<% if activity.odd? %>
 <% @activities.each do |activity| %>
   <div>
     <div class="cell">
   <%= image_tag(activity.image) %>
 </div>
 <div class="cell">
   <h4><%= activity.title %></h4>
   <p><%= activity.description %></p>
   <span><%= activity.distance %></span>
 </div>
   </div>
  <% end %>
<% else %>
  <% @activities.each do |activity| %>
    <div>
      <div class="cell">
    <h4><%= activity.title %></h4>
    <p><%= activity.description %></p>
    <span><%= activity.distance %></span>
  </div>
  <div class="cell">
    <%= image_tag(activity.image) %>
      </div>
</div>
<% end %>

有没有一种方法可以通过if语句来实现这一点？大概是这样的：

<div>
  <div class="cell">
    <h4><%= activity.title %></h4>
    <p><%= activity.description %></p>
    <span><%= activity.distance %></span>
  </div>
  <div class="cell">
    <%= image_tag(activity.image) %>
  </div>
</div>

<% if activity.odd? %>
 <% @activities.each do |activity| %>
   <div>
     <div class="cell">
   <%= image_tag(activity.image) %>
 </div>
 <div class="cell">
   <h4><%= activity.title %></h4>
   <p><%= activity.description %></p>
   <span><%= activity.distance %></span>
 </div>
   </div>
  <% end %>
<% else %>
  <% @activities.each do |activity| %>
    <div>
      <div class="cell">
    <h4><%= activity.title %></h4>
    <p><%= activity.description %></p>
    <span><%= activity.distance %></span>
  </div>
  <div class="cell">
    <%= image_tag(activity.image) %>
      </div>
</div>
<% end %>

有几种方法可以做到这一点

第一种也是最好的方法是使用CSS的第n个子项选择器来实现这一点，假设纯粹通过CSS就可以实现您想要的效果。使用第n个子项（奇数）或第n个子项（偶数），如中所述

如果您使用

.each

对集合进行迭代，则可以使用_index添加

，并检查索引是奇数还是偶数：

<% @activities.each.with_index do |activity, index| %>
  <% if index.odd? %>
    ...
  <% else %>
    ...
  <% end %>
<% end %>

使用

和_index

的替代方法是使用Rails的

cycle

helper，它“神奇地”在每次调用下一个参数时循环返回下一个参数：

<% @activities.each do |activity| %>
  <% if cycle('odd', 'even') == 'odd' %>
    ...
  <% end %>
<% end %>

---

或者你也可以对奇数和偶数div使用相同的html，但要解决css中的锯齿形问题，还可以使用循环技巧来设置div的类。@niels这是我的首选solution@niels我已经试了一个小时来解决CSS的问题。我使用的是第n个child，但这与IE不兼容。我尝试使用表头行翻转div，但无法将它们向左浮动。如果要使用css，请使用meagar的

cycle

方法将class=“odd”或class=“偶数”添加到每一行，还可以将类名从“cell”更改为“image cell”和“info cell”（或其他）。然后在css中可以执行类似于

.odd.image单元格{float:left；}.odd.info单元格{float:right；}

和

偶数.image单元格{float:right；}.偶数.info单元格{float:left；}