Rails奇怪,即使声明

时间:2012-08-25 14:40:37

标签: ruby-on-rails dom

我的活动模型有一个循环

<% @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 %>  

我想创建一个zig-zag效果,所以我需要为每个偶数活动重新排列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语句执行此操作?像这样:

<% 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 %>

1 个答案:

答案 0 :(得分:14)

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

  1. 第一种也是最好的方法是使用CSS的nth-child选择器来做这件事,假设它可以纯粹通过CSS实现你想要的效果。使用nth-child(odd)nth-child(even),如Alternate table row color using CSS?

  2. 中所述
  3. 如果您使用.each迭代集合,则可以添加.with_index并检查索引是奇数还是偶数:

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

    请注意,默认情况下,索引是从零开始的,因此您的第一个元素将被视为“偶数”。您可以将起始索引1传递给with_index,如果您希望交替开始奇数:

    <% @activities.each.with_index(1) do |activity, index| %>
    
  4. 使用with_index的另一种方法是使用Rails'cycle帮助程序,每次调用它时,它会“神奇地”返回循环中的下一个参数:

    <% @activities.each do |activity| %>
      <% if cycle('odd', 'even') == 'odd' %>
        ...
      <% end %>
    <% end %>
    
  5. 另请注意,这是重构的绝佳机会。你应该将两个重用的cell div提炼成他们自己的部分并按你想要的顺序渲染它们:

    <% if index.odd? %>
      <%= render h4_part %>
      <%= render img_part %>
    <% else %>
      <% render img_part %>
      <% render h4_part %>
    <% end %>