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的第二个参数。您可以使用它来设置偏移量。

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

2 个答案: