Change color every other row with $.each - css

Question

I am making a golf leaderboard and want to change the color on every other row to be slightly grey... How do I do that?
Here is how I get the leaderboard using ajax:
$.get("http://mypage.com/json/getleaderboard.php", function(data) {
var output = '';
output += '<li class="leaderboard-head"><span class="leaderboard-head-placement"> </span><span class="leaderboard-name tr" key="name">Name</span><span class="leaderboard-head-points">P</span></li>';
$.each(data, function (i, val) {
output += '<li><span class="leaderboard-placement">' + val.placement + '</span><span class="leaderboard-name">' + val.name + '</span><span class="leaderboard-points">' + val.points + '</span></li>';
});
$('#leaderboardList').append(output).listview('refresh');
}, "json");
hoping for help and thanks in advance :-)

Answer 1

You can use the nth-child selector. e.g.
<ul class="leaderboard">
<li class="leaderboard-head">1</li>
<li class="leaderboard-head">2</li>
<li class="leaderboard-head">3</li>
<li class="leaderboard-head">4</li>
<li class="leaderboard-head">5</li>
<li class="leaderboard-head">6</li>
</ul>
CSS
.leaderboard-head:nth-child(odd){ // Odd/Even according to your requirements
background-color: gray;
}
Note that this will only work in CSS3 compatible browsers. For others you can use :
$(".leaderboard").children(":nth-child(odd)").each(function(){ // Odd/Even according to your requirements
$(this).css("background", "gray");
});
FIDDLE
You can remove the css/jquery and it will still work.

Answer 2

Simple, you use CSS and do (assuming there is a class leaderboard-entry):
li.leaderboard-entry {
background-color: #efefef;
}
li.leaderboard-entry:nth-child(even) {
background-color: #afafaf;
}
No JavaScript required.
On a more general note, your code should read
$.get("http://mypage.com/json/getleaderboard.php")
.done(function(data) {
$('<li class="leaderboard-head">' +
'<span class="leaderboard-head-placement"> </span>' +
'<span class="leaderboard-name tr" key="name">Name</span>' +
'<span class="leaderboard-head-points">P</span>' +
'</li>'
).appendTo('#leaderboardList');
$.each(data, function (i, val) {
$('<li class="leaderboard-entry">')
.append($('<span class="leaderboard-placement">', {text: val.placement}))
.append($('<span class="leaderboard-name">', {text: val.name}))
.append($('<span class="leaderboard-points">', {text: val.points}))
.appendTo('#leaderboardList');
});
$('#leaderboardList').listview('refresh');
});
Don't create HTML by concatenating arbitrary strings. This is the single source of cross site scripting vulnerabilities (and blown markup).
Also, declaring the request type ("json") in jQuery is superfluous if the server sends JSON and sets the correct Content-Type header.

Answer 3

if you sway to do using jquery rather than css (good one)
$.get("http://mypage.com/json/getleaderboard.php", function(data) {
var output = '';
output += '<li class="leaderboard-head"><span class="leaderboard-head-placement"> </span><span class="leaderboard-name tr" key="name">Name</span><span class="leaderboard-head-points">P</span></li>';
$.each(data, function (i, val) {
var color_style_class = 'blue';
if (i % 2 == 0)
{
color_style_class = 'green';
}
else
{
color_style_class = 'red';
}
output += '<li><span class="leaderboard-placement ' + color_style_class + '">' + val.placement + '</span><span class="leaderboard-name">' + val.name + '</span><span class="leaderboard-points">' + val.points + '</span></li>';
});
$('#leaderboardList').append(output).listview('refresh');
}, "json");
define new style for 'blue' , 'green' and 'red' or whatever you like