2012-04-11 26 views
3

Ich habe eine Javascript-Schleife und wollen einige ZahlenMarkieren Sie einfache Reihe von Zahlen?

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

jetzt markieren i 1,5,9,13,17 ... jeden 4. auswählen möchten, aber beginnend mit 1 und es markieren. Jede Sekunde ist einfach:

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

Wie kann ich das tun?

Antwort

4

Ich bin überrascht, dass die Leute n-Kind-Selektoren für jQuery empfehlen, aber nicht einfach nur n-Kind-Styling via CSS.

In Ihrem Stylesheet:

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

es funktioniert nicht vor IE9 - http://www.quirksmode.org/css/contents.html –

+0

Das ist gut zu wissen, sicher. Tks. –

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

Sie die nth-child Selektor verwenden sollten

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

Sie dies mit dem n-ten-Kind-Selektor machen kann. Sehen Sie diese js Geige:

http://jsfiddle.net/pJZkL/

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

Die Logik für das jetzt in der CSS:

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

Ich bin nicht sicher, ob ich deine Frage richtig bekam. Von dem, was ich verstehe, sollte die folgende Schleife Ihnen helfen.

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

Dies sollte es tun. ive nicht getestet es aber .. Prost

Verwandte Themen