CODEWITHSUNDEEP
ruby-on-rails-3loopshtml
Noz
Noz

Reputation: 6346

Rails 3 Assign A Container Div Within Loop

say I'm looping through an array of products, how would I go about assigning a container div within that loop. For instance I want output like so:

<div class="page">
  <p>product1</p>
  <p>product2</p>
  <p>product3</p>
  <p>product4</p>
</div>
<div class="page">
  <p>product5</p>
  <p>product6</p>
  <p>product7</p>
  <p>product8</p>
</div>

I tried something like this:

<% @products.each_with_index do |product, index| %>
  <% if index%4 == 0 %>
    <div class="page">
  <%end%>
  <p><%= product.data %>
  <% if index%4 == 0 %>
    </div>>
  <%end%>
<% end %>

But as expected it will only surround every 4th product with the container. I'm thinking that I'm going to need two loops in order for this to work, but how can I do this without duplicating data?

Edit

When using alternatives to each_with_index is there any way to keep a track of the index using this method? There are also some conditional attributes that get set based on the index value.

For example:

style=<%= index == 0 ? "top:5px;" : ""%>

Upvotes: 1

Views: 388

Answers (4)

Stefan
Stefan

Reputation: 114178

The Rails method to split an array into groups of equal size is ary.in_groups_of(number)

<% @products.in_groups_of(4, false) do |group| %>
  <div class="page">
    <% group.each do |product| %>
      <p><% product.data %></p>
    <% end %>
  </div>
<% end %>

Much nicer in Haml :)

- @products.in_groups_of(4, false) do |group|
  .page
    - group.each do |product|
      %p= product.data

You can get the absolute product index with @products.index(product) or the group index with

<% @products.in_groups_of(4, false).each_with_index do |group, group_index| %>

Upvotes: 1

NARKOZ
NARKOZ

Reputation: 27911

<% @products.each_slice(4) do |slice| %>
  <div class="page">
    <% slice.each do |product| %>
      <p><%= product.data %></p>
    <% end %>
  </div>
<% end %>

Upvotes: 3

Jordan Running
Jordan Running

Reputation: 106027

Another approach:

<% while group = @products.take 4 %>
  <div class="page">

  <% group.each do |product| %>
    <p><%= product.data %></p>
  <% end %>

  </div>
<% end %>

Upvotes: 2

Dan O
Dan O

Reputation: 6090

<div class="page">

<% @products.each_with_index do |product, index| %>
    <p><% product.data %></p>

    <% if index % 4 == 3 %>
        </div><div class="page">
    <% end %>
<% end %>

</div>

(edit: forgot my end tag!)

Upvotes: 1

Related Questions