Come faccio a scorrere una classe pari/dispari mentre scorre sugli articoli?

Question

Utilizzando jquery-tmpl, voglio estrarre la presentazione delle righe aggiungendo una classe a ogni seconda, quindi dai dati [Cat ',' Cane ',' Cavallo ',' Noddy '] genera:

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

Le soluzioni suggested here sembravano l'inizio di qualcosa che potrebbe essere ulteriormente perfezionato per una facile digestione da parte di noi noddy.

Answer 1

Non importa. Overcomplicating cose come al solito ...

Basta seguire con la: Selettore dispari con addClass ...

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

Answer 2

appena trovato la soluzione dopo pochi tentativi ed errori. È possibile utilizzare il tag {{=}} per valutare l'espressione:

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

Naturalmente è possibile modificare in base alle proprie esigenze esattamente - si può mettere la classe dentro e stampare valore vuoto per pari o dispari.

Un'altra soluzione sarebbe utilizzare una funzione (ne esiste un esempio nei documenti jmery tmpl), ma è brutta.

Answer 3

@ John Mee, non penso che tu stia complicando troppo.

Imho il modello è il luogo in cui deve avvenire l'aggiunta della classe dispari. Logica e rendimento saggio.

Here è una patch per avere l'indice all'interno di un modello annidato. Se ti piace avere una proprietà addizionale di $ potrebbe essere facilmente estesa come segue:

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