RoR/HAML/HTML add a new row after third element in html using ruby on rails

Question

My index page looks like:

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

Given that I have 5 items. This is generating:

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

I need it to generate the following somehow, pretty much each row can contain 3 items:

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

Is there a good way to accomplish this?

Thank you in advance!

You haven’t closed your div elements in your HTML, did you mean to do so? — matt
– matt, Commented Jul 18, 2014 at 16:01
but is what you’ve put the result you actually want to achieve, or should the inner divs all be closed and the first sub features row div be closed before the second is open? The answer will depend on that. — matt
– matt, Commented Jul 18, 2014 at 16:28

matt · Accepted Answer · 2014-07-18 16:05:56Z

6

Use each_slice to organise the data first, then the structure of the Haml will be simple:

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

answered Jul 18, 2014 at 16:05

matt

80k8 gold badges169 silver badges199 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CWitty · Accepted Answer · 2014-07-18 16:05:56Z

0

.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"}\

You can instead use each_with_index. For everytime that it equals 0 when it is divided by 3, I create a div class "sub-feature row"

edited Jul 18, 2014 at 16:05

CWitty

4,5464 gold badges25 silver badges40 bronze badges

answered Jul 18, 2014 at 15:40

William Wright

252 bronze badges

4 Comments

CWitty Over a year ago

Are you talking about the missing end?

MrYoshiji Over a year ago

idx is an index, not a count: on the first iteration, idx is equal to 0, not 1; on the third iteration, idx is equal to 2, not 3. idx % 3 == 0 will not work as expected, use if (idx+1) % 3 == 0 instead

CWitty Over a year ago

That is what I get for editing someone elses post, and not looking at it in depth

MrYoshiji Over a year ago

@Mandeep no it should not be idx % 4 == 0: Try in your IRB console (0..12).each{ |n| puts n if n%4 == 0 }, it is showing every 4th element, not every 3rd.

Collectives™ on Stack Overflow

RoR/HAML/HTML add a new row after third element in html using ruby on rails

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related