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

我在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 -->

$ServiceHeader
美元摘要

我们可以使用css

：第n个子项

选择器以我们想要的元素为目标，而不是在模板中添加类

.container.service内部：第n个子（2），
.容器。内部服务：第n个子（5），
.容器.服务内部：第n个子容器（8），
.容器.服务内部：第n个子（11）{
背景色：红色；
}

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

.container.service内部：第n个子（3n-1）{
背景颜色：绿色；
}

---

是一个css3选择器，它现在具有非常好的性能。

我们可以使用css

：第n个子

选择器以我们想要的元素为目标，而不是在模板中添加一个类

.container.service内部：第n个子（2），
.容器。内部服务：第n个子（5），
.容器.服务内部：第n个子容器（8），
.容器.服务内部：第n个子（11）{
背景色：红色；
}

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

.container.service内部：第n个子（3n-1）{
背景颜色：绿色；
}

---

是一个css3选择器，现在它的性能非常好。

虽然我也更喜欢使用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，但以下是使用SilverStripe模板的方法：

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

美元价值

---

请注意

$MultipleOf

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

完美，第二个示例是我应该做的，已经测试过并且工作正常。因为我希望它是动态的，而不是设置的，所以从元素2开始，从那时起，每三个元素都要设置样式。谢谢@3dgoo！：）完美，第二个例子是我应该做的，已经测试过并且工作完美。因为我希望它是动态的，而不是设置的，所以从元素2开始，从那时起，每三个元素都要设置样式。谢谢@3dgoo！：）很好，很高兴知道如何在Silverstripe模板中执行此操作。谢谢！：）这可能是个人偏好，但我更倾向于这样做：完美，很好知道如何在Silverstripe模板中实现它。谢谢！：）这也许是个人偏好，但我更倾向于：