13

アイテムのリストを一度に3つレンダリングして、3行で出力されるようにします。私は現在使用しています

<div class="row">
  <div class="three columns">
 <% @items.each do |f|%>
   <div class="item">
     <%= f.content %>
       </div>
     <% end %>
  </div>
</div>

すべてのルールを1つの「行」に出力します-

<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>

私がやりたいのは、返された3つのアイテムごとに行を出力することです。

<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>
<div class="row">
  <div class="three columns">
   <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
       <div class="item">
     This is the content
       </div>
  </div>
</div>

ありがとう

4

2 に答える 2

40

前述のほかにeach_slice、Railsには次のin_groups_ofように使用できるメソッドもあります。

<% @items.in_groups_of(3, false).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

とほぼ同じeach_sliceですが、空白のdivを出力する必要があるシナリオが次のように非常にクリーンになる点が異なります。

<% @items.in_groups_of(3).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content if item %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

in_groups_ofデフォルトでは、最後のグループの欠落しているアイテムを埋めるnilので、最後の数回の反復を行い、を呼び出してif item爆発しないことを確認します。contentnil

in_groupsビューのフォーマットに使用するもう1つの楽しいものです。

于 2013-01-25T20:40:49.187 に答える
11

each_sliceメソッドを使用できます。

<% @items.each_slice(3) do |array_of_3_items|%>
  <div class="row">
    <div class="three columns">
      <% array_of_3_items.each do |item|%>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

追記：最後の行に2つのアイテムしかない場合でも、最後の行に3 divが必要な場合はどうなりますか？（つまり、これ@itemsは5つの項目のリストであり、最後の行は2 divのみを出力する必要があります）。

ソリューション：

<% @items.each_slice(3) do |array_of_3_items|%>
  <div class="row">
    <div class="three columns">
      <% array_of_3_items.each do |item|%>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
      <% (3 - array_of_3_items.length).times.each do |fake_div| %>
        <div class="item empty">
        </div>
      <% end %>
    </div>
  </div>
<% end %>
于 2013-01-25T19:27:51.840 に答える