8

Activity モデルのループがあります

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

ジグザグ効果を作成したいので、アクティビティごとに 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 %>
4

1 に答える 1

17

これを行うにはいくつかの方法があります。

  1. 最初の最良の方法は、CSSnth-childを介して純粋に目的の効果を達成できると仮定して、CSSのセレクターを使用してこれを行うことです。CSSを使用した代替テーブル行の色で説明されているように、nth-child(odd)またはを使用しますか？nth-child(even)

  2. を使用してコレクションを反復処理している場合は.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| %>

  3. 使用する代わりに、 with_indexRailsのcycleヘルパーを使用することもできます。このヘルパーは、呼び出されるたびに次の引数を「魔法のように」ローテーションで返します。

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

また、これはリファクタリングの素晴らしい機会であることに注意してください。再利用された2つのcelldivをそれぞれのパーシャルに抽出し、必要な順序でレンダリングする必要があります。

<% if index.odd? %>
  <%= render h4_part %>
  <%= render img_part %>
<% else %>
  <% render img_part %>
  <% render h4_part %>
<% end %>
于 2012-08-25T14:43:22.763 に答える