¿Cómo ciclo una clase impar/par cuando pasa por encima de los elementos?

Question

Usando el jquery-tmpl, quiero alinear la presentación de las filas agregando una clase a cada segundo, así que a partir de los datos ['Cat', 'Dog', 'Horse', 'Noddy'] genera:

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

Las soluciones suggested here parecían el comienzo de algo que podría mejorarse aún más para facilitar la digestión.

Answer 1

No importa. Complicar las cosas como de costumbre ...

Sólo seguir con el selector: rara, con addClass ...

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

Answer 2

acaba de encontrar la solución después de unos pocos ensayos y errores. Puede usar la etiqueta {{=}} para la evaluación de la expresión:

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

Por supuesto puede modificarlo para adaptarlo a sus necesidades exactamente - se puede poner dentro de la clase y la impresión de valor vacío para par o impar.

Otra solución sería usar una función (hay un ejemplo de esto en los documentos de jquery tmpl), pero es fea.

Answer 3

@John Mee, no creo que sea demasiado complicado.

Imho la plantilla es el lugar donde debe tener lugar la adición de la clase impar. Lógica y rendimiento sabio.

Here es un parche para tener el índice dentro de una plantilla anidada. Si desea tener una propiedad $ impar adicional, puede ampliarse fácilmente de la siguiente manera:

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