RoR/HAML/HTML使用RubyonRails在HTML中的第三个元素后添加新行

我的索引页如下所示：

.subfeatures.row
  - @collection_pages.each do |collection_page|
    %div{class: "subfeature-0#{collection_page.position} columns four"}
      = link_to collection_page do
        .img
          = image_tag collection_page.cover_image
          .content
            %h3.title
              = collection_page.link
            %hr
            %p.description View Collection >

考虑到我有5个项目。 这产生了：

    <div class="sub features row">
      <div class="subfeature-01 columns four">
      <div class="subfeature-02 columns four">
      <div class="subfeature-03 columns four">
      <div class="subfeature-04 columns four">
      <div class="subfeature-05 columns four">
   </div>

我需要它以某种方式生成以下内容，几乎每行可以包含3项：

  <div class="sub features row">
    <div class="subfeature-01 columns four">
    <div class="subfeature-02 columns four">
    <div class="subfeature-03 columns four">
  </div>

  <div class="sub features row">
    <div class="subfeature-04 columns four">
    <div class="subfeature-05 columns four">
  </div>

有没有一个好的方法来实现这一点

提前谢谢你

.subfeatures.row
  - @collection_pages.each_with_index do |collection_page, idx|
    if idx % 3 = 0
      %div{class: "subfeature-row"}
    end
    %div{class: "subfeature-0#{collection_page.position} columns four"}\

您可以改为使用带有索引的

每个\u

。每当它除以3等于0时，我都会创建一个div类“子要素行”

用于首先组织数据，然后Haml的结构将很简单：

- @collection_pages.each_slice(3) do |slice|
  .subfeatures.row
    - slice.each do |collection_page|
      %div{class: "subfeature-0#{collection_page.position} columns four"}

---

您还没有关闭HTML中的div元素，您是想这样做吗？我只是以它为例。但您实际想要实现的结果是，还是应该关闭所有内部div，并在打开第二个

子功能行之前关闭第一个
div？答案将取决于此。啊，很抱歉，我做了编辑！你说的是缺少的
end
？
idx
是一个索引，而不是计数：在第一次迭代中，
idx
等于
0
，而不是
1
；在第三次迭代中，
idx
等于
2
，而不是
3
idx%3==0
将无法按预期工作，请使用
if（idx+1）%3==0
代替它。这是我编辑其他人的帖子，而不是查看文章时得到的结果depth@Mandeep不应该是
idx%4==0
：在您的IRB控制台中尝试
（0..12）。如果n%4==0}
，则每个{n |放置n，它将显示每4个元素，不是每三个。