$ .each로 다른 행마다 색상을 변경하십시오.

Question

골프 리더 보드를 만들고 다른 모든 행의 색상을 약간 회색으로 변경하고 싶습니다 ... 어떻게해야합니까?

:-) 사전에 도움과 감사에 대한

Answer 1

nth 자식 선택기를 사용할 수 있습니다. 예 : 이것은 단지 CSS3 호환 브라우저에서 작동합니다

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

참고. 다른 사람을 위해 당신은 사용할 수 있습니다

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

FIDDLE

당신은 CSS/jQuery를 제거 할 수 있으며, 그것은 여전히 ​​작동합니다. 당신이 CSS보다는 (좋은)를 jQuery를 사용하여 할 바꿀 경우

Answer 2

간단한을 희망

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

당신이 (클래스 leaderboard-entry이 가정) CSS를 사용하여 수행 : 나는 아약스를 사용하여 리더를 얻는 방법은 다음과

입니다 :

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을 생성하지 마십시오 읽어야합니다. 이것은 크로스 사이트 스크립팅 취약점 (및 날카로운 마크 업)의 단일 소스입니다.

또한 jQuery에서 요청 유형 ("json")을 선언하면 서버가 JSON을 보내고 올바른 Content-Type 헤더를 설정하면 불필요합니다.

Answer 3

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

는 '블루', '녹색'과 '빨간색'또는

을 원하는대로 새로운 스타일을 정의