How do I cycle an odd/even class as it loops over the items?

Using the jquery-tmpl, I want to stripe presentation of the rows by adding a class to every second one, so from data ['Cat','Dog','Horse','Noddy'] it generates:

<li>Cat</li>
&l开发者_如何学Ct;li class="odd">Dog</li>
<li>Horse</li>
<li class="odd">Noddy</li>

The solutions suggested here looked like the start of something that could be further refined for easy digestion by us noddy's.

Never mind. Overcomplicating things as usual...

Just follow it up with the :odd selector with addClass...

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

Just found the solution after few trial and errors. You can use the {{= }} tag for evaluating expression:

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

Of course you can modify it to suit your needs exactly - you can put the class inside and print empty value for odd or even.

Another solution would be to use a function (there is example of this in the jquery tmpl docs), but it is ugly.

@John Mee, I don't think you are overcomplicating.

Imho the template is the place where the addition of the odd-Class should take place. Logic and performance wise.

Here is a patch for having the index inside a nested template. If you like to have an additional $odd property it could be easily extended as follows:

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