0

ゴルフのリーダーボードを作成していて、1 行おきに色を少し灰色に変更したいと考えています...どうすればよいですか?

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");

事前に助けと感謝を願っています:-)

4

3 に答える 3

2

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 を削除しても、引き続き機能します。

于 2013-08-05T13:13:30.977 に答える
2

シンプルに、CSS を使用して実行します ( class があると仮定します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

于 2013-08-05T13:08:18.337 に答える
0

css ではなく jquery を使用する場合 (良い方法)

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

'blue' 、 'green' 、 'red' などの新しいスタイルを定義します。

于 2013-08-05T13:13:55.520 に答える