We are going to show how to create lists with alternate colors in Prototype and Jquery.

Let’s say you have an HTML list with with the ‘result‘ id, and you want it to have alternating colors. 

First, create a css class that displays a list item in a different color:

li.alternate { color:green;} 

In Prototype, you use the following syntax:

document.observe(’dom:loaded’ , function(){
    $$(’#result li:nth-child(2n)’ ).invoke(’addClassName’ , ‘alternate’ );
});

Jquery uses the following syntax:

$(document).ready(function(){       
    $("#result li:nth-child(even)").addClass("alternate");           
});