I'm just starting out with Ruby from a java background. I'm trying to code a particular loop but can't figure out the right syntax:
Could someone help me troubleshoot this please? I'm trying to write a loop but use different css classes to change the style of each block.
Realise this is probably easy, but help is appreciated....
<%= @products.each do |product, i| %>
<% if i % 1 %>
<div class="items-row clearfix">
<div class="one_fourth">
<div class="item-thumb">
<a href="" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
<p class="color-wrap">
<span class="color" style="background:#ddd;"></span>
<span class="color" style="background:#f9f9f9;"></span>
<span class="color" style="background:green;"></span>
<span class="color" style="background:red;"></span>
</p>
</div>
<% elsif i % 4 %>
<div class="one_fourth last">
<div class="item-thumb">
<a href="#" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
</div>
</div><!-- end row -->
<% else %>
<div class="one_fourth">
<div class="item-thumb">
<a href="#" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
</div>
<p>Item Name</p>
<p class="bold">$79.95 AUD</p>
</div>
<% end %>
<% end %>
You can do something like this using cycle :
<% products.each_slice(4) do |slice| %>
<div class="items-row clearfix">
<% slice.each_with_index do |product,i| %>
<div class="one_fourth <%= cycle("first", "second", "third", "fourth") %>">
<%= render product %>
<% if i != 3 %>
<p class="color-wrap">
<span class="color" style="background:#ddd;"></span>
<span class="color" style="background:#f9f9f9;"></span>
<span class="color" style="background:green;"></span>
<span class="color" style="background:red;"></span>
</p>
<% end %>
</div>
<% end %>
</div>
<% end %>
_product.html.erb:
<div class="item-thumb">
<a href="" title=""><img src="<%= image_path "thumb.png" %>" alt="" class="thumb" width="162" height="230" /></a>
</div>
<p><%= product.name %></p>
<p class="bold">$79.95 AUD</p>
Rather than if/else statements and CSS markup in your views, you should probably externalize your CSS, make a few partials, and make use of ActionView::Helpers::TextHelper#cycle . For example:
<%= @products.each do |product| %>
<div class="<%= cycle('first', 'second', 'third', 'fourth') -%>">
<!-- 1. let the CSS class handle display differences -->
<!-- 2. render a partial based on #current_cycle -->
<%= render :partial => current_cycle %>
</div>
<% end %>
I'd say the mod's are your problem. It's never going to go into the first block as n%1 will always return 0. Try your logic out using irb to get you going.
你可能想尝试jQuery nth-child
I got part of the answer. Slight change of syntax to use "each_with_index" instead of just each.
Still trying to work out there's a lot of variations of when a product can be the last tile and require closing, first on row, first in set, last in a row.....
Thanks guys, I think I've answered my own question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.