Question

I’d like, based on an array of data received, to produce a list of <li> items. Each one will have an alternating class of either “even” or “odd”. Here is what I have so far:

<script id="news_template" type="text/x-jquery-tmpl">
    <li>
        {{= title }}
    </li>
</script>

Looking over the documentation, I don’t see anything that would easily lend itself to doing this. Any thoughts?

Thanks.

EDIT: If I could simply evaluate raw JavaScript in some way, I could simply set a variable and base my output on that in each iteration. I know jQote2 has this feature. For instance, I could do something like:

<% even = !even; %>

…and then base the class on the state of that var.

Answer 1

I’ve just had to do this last week for a table with this structure:

<table class='stripe' width='100%'>
  <!---awesome table with awesome rows and awesome columns--->
 < /table>

So I have used a couple of css lines:

 tr.even {background-color: #DDD;  color:Black;}
 tr.odd {background-color: #fff; color:Black;} 

Then, using jQuery:

  $('table.stripe tbody tr:odd').addClass('odd');
  $('table.stripe tbody tr:even').addClass('even'); 

In your case, just use:

$ ('ul.stripe li:even').addClass('even');
$ ('ul.stripe li:odd').addClass('odd');

Which means some like “Please, Mr. jQuery, put an odd or even class depending on if tr is odd or even”.

Hope it helps!