如何在 Razor + Umbraco 的 @foreach 循环中给交替的项分配交替的类

Question

我正在使用Umbraco 7.x。

我需要像以下这样在使用for each生成的列表项中进行交替，需要分别给予相应的类名。

那么有没有办法确定偶数行和奇数行以给出相应的类名。

以下是我用于此目的的代码。

@foreach (var itemTblRows in @Model.Children) 
        {       
         <tr class="light">
                <td>@itemTblRows.ABL_tableData1</td>
                <td>@itemTblRows.ABL_tableData2</td>
                <td>@itemTblRows.ABL_tableData3</td>
                <td>@itemTblRows.ABL_tableData4</td>
              </tr>
        }

我不想使用CSS和JS来实现这一点，因为在其他情况下（布局不同）它将无法正常工作。

- BJ Patel

Answer 1

你可以轻松使用 IsOdd 和 IsEven 辅助方法：

<tr class="@itemTblRows.IsOdd("odd","even")>

或者

<tr class="@itemTblRows.IsEven("even","odd")>

- dampee

Answer 2

这里有一个仅使用CSS的简单方法可以实现你所需的结果。首先，在这些行所属的表格中添加一个类：

<table class="striped">
@foreach (var itemTblRows in @Model.Children) 
{       
   <tr>
        <td>@itemTblRows.ABL_tableData1</td>
        <td>@itemTblRows.ABL_tableData2</td>
        <td>@itemTblRows.ABL_tableData3</td>
        <td>@itemTblRows.ABL_tableData4</td>
   </tr>
}
</table>

接下来添加这些CSS规则：

table.striped tr:nth-child(even) { background-color: grey; }
table.striped tr:nth-child(odd) { background-color: white; }

然后您根据需要添加CSS。 nth-child（n）选择器允许您选择每个匹配项的第n个子元素。指定奇数或偶数允许您选择每个奇数子元素或每个偶数子元素。

- c0r3yz

Answer 3

创建计数器变量c，在每个循环中递增。在每个循环中使用2作为分母执行模运算（%）。如果结果大于0，则为奇数，否则为偶数。

    var c = 1;
    @foreach (var itemTblRows in @Model.Children)
    {
        var oddEvenClass = c % 2 > 0 ? "odd" : "even";
        c += 1;
        <tr class="light @oddEvenClass">
            <td>@itemTblRows.ABL_tableData1</td>
            <td>@itemTblRows.ABL_tableData2</td>
            <td>@itemTblRows.ABL_tableData3</td>
            <td>@itemTblRows.ABL_tableData4</td>
        </tr>
    }

- wingyip