我正在制作一个高尔夫排行榜,我想将每隔一行的颜色更改为略带灰色...我该怎么做?
以下是我如何使用 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");
希望得到帮助并提前致谢:-)
最佳答案
您可以使用 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");
});
您可以删除 css/jquery,它仍然有效。
关于css - 用 $.each 每隔一行改变颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18058918/