css - Rails 4 - 如何编写以交替格式显示实例的 View

Question

我正在尝试弄清楚如何以交替格式呈现数据。

下面是两个列表项。第一个只是“li”。第二个附加了 class="timeline-inverted"。此 CSS 在页面中央设置时间轴样式，我想在每一侧显示实例(按交替顺序)。

第一个列表项:

<li>
  <div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
  <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
    <p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> Aug 2010 - Nov 2012</p>
    <div class="timeline-photo timeline-bg01-01"></div>
    <div class="timeline-heading">
      <h3 class="font-accident-two-normal uppercase">Bluepixel LLC, London</h3>
      <h6 class="uppercase">Junior Designer</h6>
    </div>
  </div>
</li>

第二个列表项:

<li class="timeline-inverted">
  <div class="timeline-badge success"><i class="flaticon-graduation61"></i></div>
  <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" data-wow-offset="10">
    <p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> March 2013 - Jan 2014</p>
    <div class="timeline-photo timeline-bg02-01"></div>
    <div class="timeline-heading">
      <h3 class="font-accident-two-normal uppercase">Rocket Media, Berlin</h3>
      <h6 class="uppercase">Senior Designer</h6>
    </div>
  </div>
</li>

在我看来，我目前有:

<div class="dividewhite4"></div>
<% profile.jobs.order(start_date: :desc).each do |job| %>
<ul class="timeline-vert timeline-light">
  <li>
    <div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
    <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
      <p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> 
      </p>
      <div class="timeline-photo timeline-bg01-01"></div>
      <div class="timeline-heading">
        <h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
        <h6 class="uppercase"><%= job.title %></h6>
        <p><%= job.description %></p>
      </div>
    </div>
  </li>
</ul>
<% end %>
<div class="dividewhite6"></div>

但我想说的是，每个第一个/第三个/第五个实例都应采用该列表格式，而第二个/第四个/第六个实例应采用“li”格式，并附有一个类方法以将其放在页面的另一边。

有人知道怎么做吗？

周期建议

尝试了下面的循环建议后，它将每个属性放入两个列表项中的每一个。我怎样才能调整它，使每个属性只显示一次，但按时间顺序排列，以便它们交替显示列表项样式？

<% profile.jobs.order(start_date: :desc).each do |job| %>
<ul class="timeline-vert timeline-light" class="<% cycle("odd", "even") %>">
  <li>
    <div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
    <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
      <p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> 
        <% if job.current_job == true %> 
        <%= job.start_date.strftime('%B %Y') %>, continuing
        <% else %>   
        <%= job.period %>
        <% end %>   
      </p>
      <div class="timeline-photo timeline-bg01-01"></div>
      <div class="timeline-heading">
        <h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
        <h6 class="uppercase"><%= job.title %></h6>
        <p><%= job.description %></p>
      </div>
    </div>
  </li>
  <li class="timeline-inverted">
    <div class="timeline-badge success"><i class="flaticon-graduation61"></i></div>
    <div class="timeline-panel wow fadeInRight" data-wow-delay="0.3s" data-wow-offset="10">
      <p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> 
        <% if job.current_job == true %> 
        <%= job.start_date.strftime('%B %Y') %>, continuing
        <% else %>   
        <%= job.period %>
        <% end %> 
      </p>
      <div class="timeline-photo timeline-bg02-01"></div>
      <div class="timeline-heading">
        <h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
        <h6 class="uppercase"><%= job.title %></h6>
        <p><%= job.description %></p>
      </div>
    </div>
  </li>
</ul>
<% reset_cycle%>
<% end %>

编辑。更新的答案

<ul class="timeline-vert timeline-light">
  <% profile.jobs.order(start_date: :desc).each do |job| %>
  <li class="<%= cycle("", "timeline-inverted") %>">
    <div class="timeline-badge primary"><i class="flaticon-clocks18"></i></div>
    <div class="timeline-panel wow fadeInLeft" data-wow-delay="0.3s" data-wow-offset="10">
      <p class="timeline-time fontcolor-invert"><i class="glyphicon glyphicon-time"></i> 
        <% if job.current_job == true %> 
        <%= job.start_date.strftime('%B %Y') %>, continuing
        <% else %>   
        <%= job.period %>
        <% end %>   
      </p>
      <div class="timeline-photo timeline-bg01-01"></div>
      <div class="timeline-heading">
        <h3 class="font-accident-two-normal uppercase"><%= job.company %></h3>
        <h6 class="uppercase"><%= job.title %></h6>
        <p><%= job.description %></p>
      </div>
    </div>
  </li>
  <% end %>
</ul>

Answer 1

您可以通过两种方式实现这一目标:

一个是使用 cycle 助手 ( http://apidock.com/rails/ActionView/Helpers/TextHelper/cycle )。

 # Alternate CSS classes for even and odd numbers...
 @items = [1,2,3,4]
 <table>
 <% @items.each do |item| %>
   <tr class="<%= cycle("odd", "even") -%>">
     <td>item</td>
   </tr>
 <% end %>
 </table>

另一个是通过 CSS ( https://www.w3.org/Style/Examples/007/evenodd.en.html )。

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

干杯!