使用 Middleman 将 class 添加到循环中的第一个 child

Question

我正在为我的博客创建一个滑块，我想向其中添加一组特色项目，该滑块要求第一个 child 加载 class selected .

我怎样才能做到 if first child do this else do that

这是我目前的情况：

<ul class="cd-hero-slider">
    <% blog.articles.select {|a| a.data[:featured] }.each do |article| %>
      <li class="selected" style="background-image: url('https://images.unsplash.com/photo-1447014421976-7fec21d26d86?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c82e04e1201234889daab5427f481731')">
        <div class="cd-full-width">
          <h2><%= link_to article.title, article %></h2>
          <p><%= article.summary(250) %></p>
          <%= link_to 'Read More', article, :class => 'cd-btn' %>
        </div>
      </li>
    <% end %>
  </ul>

Answer 1

使用 each_with_index 而不是 each - 这会为您提供对象以及数组中的位置，首先是 0:

<% blog.articles.select {|a| a.data[:featured] }.each_with_index do |article, index| %>
  <% if index == 0 %>
    <li>I'm the first!</li>
  <% else %>
    <li>Not the first</li>
  <% end %>
<% end %>

使用 Middleman 将 class 添加到循环中的第一个 child

Add a class to the first child in a loop using Middleman

ruby

static-site

middleman