我如何循环奇数/偶数类，因为它循环项目？答案

【问题标题】：How do I cycle an odd/even class as it loops over the items?我如何循环奇数/偶数类，因为它循环项目？
【发布时间】：2011-04-30 01:16:14
【问题描述】：

使用 jquery-tmpl，我想通过向每一秒添加一个类来对行的表示进行条带化，因此它从数据 ['Cat','Dog','Horse','Noddy'] 生成：

<li>Cat</li>
<li class="odd">Dog</li>
<li>Horse</li>
<li class="odd">Noddy</li>

suggested here 的解决方案看起来像是一个可以进一步完善以便我们 noddy's 消化的东西的开始。

【问题讨论】：

【解决方案1】：

没关系。像往常一样把事情复杂化...

只需使用带有 addClass 的 :odd 选择器来跟进它...

$('#template').tmpl(data).appendTo('#list')
$("#list li:odd").addClass('odd')

【讨论】：

【解决方案2】：

经过几次尝试和错误后才找到解决方案。您可以使用 {{= }} 标签来评估表达式：

{{each(i) Animals}}<li class="{{= i % 2 ? 'even' : 'odd'}}">...</li>{{/each}}

当然，您可以修改它以完全适合您的需要 - 您可以将类放入其中并打印奇数或偶数的空值。

另一种解决方案是使用函数（在 jquery tmpl 文档中有这样的示例），但它很难看。

【讨论】：

【解决方案3】：

@John Mee，我不认为你过于复杂。

恕我直言，模板是添加奇数类的地方。逻辑和性能明智。

Here 是一个用于在嵌套模板中添加索引的补丁。如果你想拥有一个额外的 $odd 属性，它可以很容易地扩展如下：

jQuery.map( data, function( dataItem, index ) {
    if(dataItem){
         dataItem.$index = index;
         dataItem.$odd = index % 2 === 1;
    }

【讨论】：