Ruby on Rails Foreach with Bootstrap3 Row Class

Ruby on rails foreach with bootstrap3 row class

use Enumerable#each_slice

<% @work.each_slice(3) do |works| %>
  <div class="row">
    <% works.each do |work| %>
      <div class="col-md-4">*work.name*</div>
    <% end %>
  </div>
<% end %>

Rails + Bootstrap: How to iterate over collection of items with multiple items per row

You can use in_groups_of method like:

<% @items.in_groups_of(2) do |item1, item2| %>
  <div class="row">
    <div class="col-xs-6"><%= item1.attribute1 %></div>
    <div class="col-xs-6"><%= item1.attribute2 %></div>
    <% if item2 %> <%# To take care of odd groups %>
      <div class="col-xs-6"><%= item2.attribute1 %></div>
      <div class="col-xs-6"><%= item2.attribute2 %></div>
    <% end %>
  </div>
<% end %>

With in_groups_of you can group the @items collection in a group of 2 items each and iterate over it.

UPDATE

@items is generated using gem tire and is actually type of Tire::Results::Collection class. In that case, you need to first convert it to an array and then apply in_groups_of method on it as shown below:

<% @items.to_ary.in_groups_of(2) do |item1, item2| %>
  <div class="row">
    <div class="col-xs-6"><%= item1.attribute1 %></div>
    <div class="col-xs-6"><%= item1.attribute2 %></div>
    <% if item2 %> <%# To take care of odd groups %>
      <div class="col-xs-6"><%= item2.attribute1 %></div>
      <div class="col-xs-6"><%= item2.attribute2 %></div>
    <% end %>
  </div>
<% end %>

Rails loop not generationg grids

I think you're placing the each loop in the wrong place. Try something like:

<div class="row">
  <% @stories.each do |story| %>
    <div class="col-md-4">
      <%= content_tag :h2, story.name.titleize %>
      <%= image_tag story.pictures.first.image(:medium).to_s, class: "img-responsive" %>
      <%= link_to "View Story", story_path(story) %>
    </div>
  <% end %>
</div>

New row every 3 items

Besides the aforementioned each_slice, Rails also has an in_groups_of method that you can use like so:

<% @items.in_groups_of(3, false).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

Pretty much the same as each_slice, except the scenario of needing to output blank divs becomes much cleaner like so:

<% @items.in_groups_of(3).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content if item %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

in_groups_of pads missing items in the last group with nil by default, so it will make the last few iterations and the if item check will make sure it doesn't blow up by calling content on nil.

in_groups is another fun one to use for view formatting.

Split Foreach Into Different Sections

Just put some basic logic for three results per row:

echo '<div class="row">';
$count = 0;
foreach ($profiles as $p) {
    echo '<div class="col-md-3">' . $p->name . '</div>';
    $count++;
    if($count%3==0){
        print '</div><div class="row">';
        $count = 0;
    }
}
echo '</div>'

div wrapper every specific index with knockout foreach loop

I found an alternative way to achieve this. Here it is :

In the model :

 self.groupedElementsIndexs = function () {
        var indexes = new Array();
        for (var i = 0; i < self.elements().length; i = i + 6) {
            indexes.push(i);
        }

        return indexes;
    };

in the template :

<div data-bind="foreach: groupedElementsIndexs()">
        <div class="row" data-bind="foreach: $parent.elements.slice($data, $data + 6)">

For the moment it work well like that for me.

Template Toolkit - Render ranges of same loop in different rows

I would slice the list:

[% featured_items = newsfeeds.slice(0,2) %]
[% normal_items  = newsfeeds.slice(3) %]

<ul class="row-top">
    [% FOREACH news IN featured_items %]
        [% INCLUDE content_news/news_item.tt %]
    [% END %]
</ul>
<ul class="row">
    [% FOREACH news IN normal_items %]
        [% INCLUDE content_news/news_item.tt %]
        [% IF ( loop.count % 4 ) == 0 %]</ul><ul class="row>[%END%]
    [% END %]
</ul>

---

Related Topics