Как зациклить нечетный / четный класс, когда он зацикливается на элементах?

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.

Answer 1

Неважно. Как обычно, все усложняется ...

Просто добавьте: odd селектор с addClass ...

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

Answer 2

Только что нашел решение после нескольких проб и ошибок.Вы можете использовать тег {{=}} для оценки выражения:

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

Конечно, вы можете изменить его в соответствии с вашими потребностями - вы можете поместить класс внутрь и вывести пустое значение для нечетного или четного.

Другим решением было бы использование функции (пример этого есть в документации jquery tmpl), но это ужасно.

Answer 3

@ Джон Ми, я не думаю, что ты слишком усложняешь.

Имхо шаблон - это место, где должно происходить добавление нечетного класса. Логика и производительность мудры.

Здесь - патч для указания индекса во вложенном шаблоне. Если вам нравится иметь дополнительное свойство $ odd, его можно легко расширить следующим образом:

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