Question

我刚从java背景开始使用Ruby。我正在尝试编写一个特定的循环，但无法找出正确的语法：

有人可以帮我解决这个问题吗？我正在尝试编写循环但使用不同的css类来更改每个块的样式。

意识到这可能很容易，但是感谢帮助......

    <%= @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 %>

Answer 1

您可以使用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>

Answer 2

您可能应该将CSS外部化，制作一些部分内容并使用ActionView::Helpers::TextHelper#cycle，而不是在视图中使用if / else语句和CSS标记。例如：

<%= @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 %>

Answer 3

我说mod是你的问题。它永远不会进入第一个区块，因为n％1将始终返回0.使用irb尝试使用逻辑来帮助您前进。

Answer 4

您可以尝试jQuery nth-child

Answer 5

我得到了部分答案。稍微更改语法以使用“each_with_index”而不是每个。

还有很多变化，当产品可以成为最后一个瓷砖并且需要关闭时，首先是行，首先是集合，最后连续......

谢谢大家，我想我已经回答了我自己的问题。

如何以不同的标记显示每个第4个产品？

5 个答案: