Новая строка каждые 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 %>