如何以不同的標記顯示每個第4個產品？

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

我得到了答案的一部分。語法輕微更改以使用「each_with_index」而不是每個。

仍試圖找出有很多當一個產品可能是最後一張牌，並要求關閉的變化，第一行上，第一組中，最後一排.....

謝謝你們，我想我已經回答了我自己的問題。

Answer 2

我說的MOD的是你的問題。因爲n％1將始終返回0，所以永遠不會進入第一個塊。使用irb來嘗試您的邏輯，讓您順利進行。

Answer 3

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

而不是if/else語句，並在你的意見CSS標記，你應該外部化你的CSS，製作幾個部分，並使用ActionView::Helpers::TextHelper#cycle。例如：

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

你可能想嘗試jQuery nth-child