Новая строка каждые 3 позиции

Я хочу отображать список элементов 3 за раз, чтобы они выводились в строках из трех. В настоящее время я использую

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

Спасибо

Ответ 1

Помимо вышеупомянутого 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 гарантирует, что он не взорвется, вызвав content on nil.

in_groups - еще одна забавная версия для форматирования вида.

Ответ 2

Вы можете использовать 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 %>

Примечание: Что делать, если вам нужна 3 div для последней строки, даже если последняя строка содержит только 2 элемента? (т.е. @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 %>