RoR/HAML/HTML在使用ruby on rails的html中的第三个元素之后添加一个新行

Question

我的索引页面如下:

.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>

有没有一个很好的方法来实现这一目标？

先感谢您!

Answer 1

用于each_slice首先组织数据,然后Haml的结构将很简单:

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