数字の簡単な行を強調表示しますか？

Question

私はjavascriptのループを持っており、いくつかの数字

for(i=0;i<=100;i++){ 
    $("#mydiv").append("<span>"+i+"</span>"); 
} 

を強調したい今、私は1,5,9,13,17を選択したい... 4回ごとに1しかし、それをハイライトで始まります。毎秒簡単です：

for(i=0;i<=100;i++){ 
    var bool = false; 
    if(bool){ 
    $("#mydiv").append("<span>"+i+"</span>"); 
    bool = false; 
    } else { 
    $("#mydiv").append("<span class='highlight'>"+i+"</span>"); 
    bool = true; 
    } 
} 

どうすればいいですか？

Answer 1

私は、人々はjQueryのためのn番目の子のセレクタを推奨しますがされていないことを驚いていますちょうどCSSを介してn番目の子供のスタイリングをストレートアップ。あなたのスタイルシートで

：

#mydiv span:nth-child(4n-2) { background-color: yellow } 

Answer 2

はこれを見てください： http://api.jquery.com/nth-child-selector/

example

Answer 3

for(i=0;i<=100;i++){ 
    if(i%4==1){ 
    $("#mydiv").append("<span class="highlight">"+i+"</span>"); 
    } else { 
    $("#mydiv").append("<span>"+i+"</span>"); 
    } 
} 

Answer 4

あなたはn番目の子セレクタでこれを行うことができますnth-childセレクタ

$('#mydiv span:nth-child(4n+1)').addClass('highlight'); 

Answer 5

を使用する必要があります。これはフィドルのJSを参照してください：

http://jsfiddle.net/pJZkL/

$(function(){ 
    var ap = ""; 
    for(i=0;i<=100;i++){ 
     ap+="<span class='nr'>"+i+", </span>"; 
    } 
    $("p").append(ap); 
}); 

そのためのロジックがCSSになりました：

.nr{ 
    color: blue; 
} 
.nr:nth-child(4n-2){ 
    color: red; 
} 

Answer 6

私は私が正しくあなたの質問を得たかわかりません。私が理解していることから、次のループが役立つはずです。

var inc = 1; 
for(i=0;i<=100;i++){ 
    if(i !== inc){ 
    $("#mydiv").append("<span>"+i+"</span>"); 
    } else { 
    $("#mydiv").append("<span class="highlight">"+i+"</span>"); 
    inc += 4; 
    } 
} 

Answer 7

var pre = 0; 
for(i=0;i<=100;i++){ 
    if(i === 1 || (i-4) === pre){ 
     $("#mydiv").append("<span class="highlight">"+i+"</span>"); 
     pre = i; 
    } else { 
     $("#mydiv").append("<span>"+i+"</span>"); 
    } 
} 

これはそれを行う必要があります。私はそれをテストしていません..乾杯してください。