如何在循环中将css类添加到第2、5、8和11项

Question

我在 SilverStripe 模板中有一个循环。在循环的第 2、5、8、11 等项上，我需要添加一个 css 类 .service-border。

如何使用 SilverStripe 模板语言实现这一点？

<div class="container">
    <% loop $ServiceBlockItems %>
        <% if $First %>
            <div class="row equal-height-columns">
        <% end_if %>

            <%-- Every 2, 5, 8, 11th iteration I need to add a .service-border class --%>
            <div class="col-md-4 service-inner equal-height-column">
                <i class="icon-custom icon-md rounded-x icon-bg-u $IconName"></i>
                <span>$ServiceHeader</span>
                <p>$Summary</p>
            </div>

        <% if $MultipleOf(3) && not $Last %>
        </div><!-- /end row -->
        <div class="row equal-height-columns">
        <% end_if %>
    <% end_loop %>
        </div><!-- /end row -->
</div><!-- /end container -->

Answer 1

然后在我们的模板中添加一个类，我们可以使用 css :nth-child 选择器来定位我们想要的任何元素。

.container .service-inner:nth-child(2),
.container .service-inner:nth-child(5),
.container .service-inner:nth-child(8),
.container .service-inner:nth-child(11) {
    background-color: red;
}

或者，如果我们想从元素 2 开始每隔三个元素定位，我们可以使用以下 css 选择器：

.container .service-inner:nth-child(3n - 1) {
    background-color: green;
}

nth-child是一个css3选择器，现在有很好的browser support。

Answer 2

虽然我也更喜欢使用 CSS，但以下是使用 SilverStripe 模板的方法：

<% loop $Items %>
    <% if $MultipleOf(3, 2) %>
        <div class="item service-border">
    <% else %>
        <div class="item">
    <% end_if %>
        $Value
    </div>
<% end_loop %>

注意$MultipleOf 的第二个参数。您可以使用它来设置偏移量。