Question

这看起来很简单，但无法通过它思考......我有一个包含13张图片的列表（@images），我在视图中称它们为：<\ n / p>

<div class="col-xs-12" style="margin-left: 50px;">
<% @images.each do |image, key| %>
    <div class="col-xs-1" id="<%= "#{image}" %>"> 
        <%= image_tag("Portrait thumbnails/#{image}.jpg", class: "img-responsive thumbnail", alt: "#{image}", title: "#{image}") %>
        <h6><%= "#{image}" %></h6>
    </div>
<% end %>
</br>

问题是因为13张图像不适合水平放置，我想将它们分成两行6和7张图像。我怎么做？我试过了：

each_with_index但由于索引也已循环播放，我无法放置索引部分之外的容器
@images.first(6)作为临时解决方案，但后来我意识到，由于这会将哈希变为数组，因此它不适用于@images.last(7)

更理想，我想要一个可扩展的解决方案，这意味着程序会自动计算图像数量，并将每行col-xs-12行分为6个。我知道我可以通过为每组6个图像创建一个不同的实例变量来手动执行此操作，但这太过于手动，必须采用我不想的编程方式。

Answer 1

您可以使用Enumerable#each_slice。

<% @images.each_slice(6) do |images| %>  # Split into slices of 6
  <div class="col-xs-12">
    <% images.each do |image| %> # Loop through each item in the slice 
      <div class="col-xs-1">
        .. 
      </div>
    <% end %>
  </div>
<% end %>

将第一张X图像放在与最后Y张图像不同的容器中

1 个答案: