如何在循环中将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选择器,现在有很好的浏览器支持.

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.您可以使用它来设置偏移量.