Question

我正在尝试在每次更改类的Rails应用程序中遍历每个帖子。这是HTML中的布局，我将如何在rails＆lt;％@ posts.each do | post |中创建它％GT;环。 css类从style1到style 6

  <article class="style1">
    <span class="image">
      <img src="images/pic01.jpg" alt="" />
    </span>
    <a href="generic.html">
      <h2>Magna</h2>
      <div class="content">
        <p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
      </div>
    </a>
  </article>
  <article class="style2">
    <span class="image">
      <img src="images/pic02.jpg" alt="" />
    </span>
    <a href="generic.html">
      <h2>Lorem</h2>
      <div class="content">
        <p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
      </div>
    </a>
  </article>

等...

Answer 1

您可以使用each_with_index之类的内容：

- @posts.each_with_index do |post, i|
  %article{class: "style#{(i % 6) + 1}"}
    %span.image
      ...

抱歉，这是HAML而不是ERB。我不再使用ERB而忘记了它是怎么回事。但是，希望这能让您了解如何使用each_with_index。您可以在docs中阅读更多内容。

ERB示例：

<%- @posts.each_with_index do |post, i| %>
  <article class="style<%= (i % 6) + 1 %>">
    <span class="image">
      ...
    </span>
 </article>
<% end %>

Answer 2

您也可以修改您的CSS选择器：

article:nth-child(6n + 1){ color: peachpuff; }
article:nth-child(6n + 2){ color: deepskyblue; }
article:nth-child(6n + 3){ color: dimgray; }
article:nth-child(6n + 4){ color: forestgreen; }
article:nth-child(6n + 5){ color: gold; }
article:nth-child(6n + 6){ color: coral; }

此处的说明：https://css-tricks.com/how-nth-child-works/

此处示例：https://codepen.io/alex3o0/pen/rzwwqm

Answer 3

你正在寻找循环助手。

<% @posts.each do |post| %>
  <%= content_tag :div, class: cycle('style1', 'style2', 'style3') do %>
    ...
  <% end %>
<% end %>

您可以在此处找到更多信息：https://apidock.com/rails/ActionView/Helpers/TextHelper/cycle

如何在每次更改类时循环遍历Rails中的每个Post

3 个答案: