jquery-templates - 我如何循环奇数/偶数类，因为它循环项目？

Question

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

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

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

score 6 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

@John Mee，我认为您并不过分复杂。

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

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

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

3 回答 3