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

很简单，你使用CSS并做（假设有一个类leaderboard-entry）：

li.leaderboard-entry {
  background-color: #efefef;
}

li.leaderboard-entry:nth-child(even) {
  background-color: #afafaf;
}

无需JavaScript。

更一般地说，您的代码应该是

$.get("http://mypage.com/json/getleaderboard.php")
.done(function(data) {
    $('<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>'
    ).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');
});

不要通过连接任意字符串来创建HTML。这是跨站点脚本漏洞（和破坏标记）的单一来源。

此外，如果服务器发送JSON并设置正确的"json"标头，则在jQuery中声明请求类型（Content-Type）是多余的。

Answer 2

您可以使用nth-child选择器。 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;
}

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

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

FIDDLE

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

Answer 3

如果你动摇使用jquery而不是css（好的）

$.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) {
        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");

为“蓝色”，“绿色”和“红色”或任何您喜欢的内容定义新样式

使用$ .each每隔一行更改颜色

3 个答案: