css - 用 $.each 每隔一行改变颜色

Question

我正在制作一个高尔夫排行榜，我想将每隔一行的颜色更改为略带灰色...我该怎么做？

以下是我如何使用 ajax 获取排行榜:

$.get("http://mypage.com/json/getleaderboard.php", function(data) {

    var output = '';

    output += '<li class="leaderboard-head"><span class="leaderboard-head-placement">&nbsp;</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");

希望得到帮助并提前致谢:-)

Answer 1

您可以使用 nth-child 选择器。例如

<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;
}

请注意，这仅适用于 CSS3 兼容的浏览器。对于其他人，您可以使用:

$(".leaderboard").children(":nth-child(odd)").each(function(){    // Odd/Even according to your requirements
    $(this).css("background", "gray");
});

FIDDLE

您可以删除 css/jquery，它仍然有效。