3

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

これどうやってするの？

4

7 に答える 7

4

人々が jQuery の nth-child セレクターを推奨していることに驚いていますが、CSS を介した単純な nth-child スタイリングだけではありません。

スタイルシートで:

#mydiv span:nth-child(4n-2) { background-color: yellow }
于 2012-04-11T08:28:16.813 に答える
3

これは、nth-child セレクターで作成できます。この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;
}
于 2012-04-11T08:27:25.443 に答える
2

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

例

于 2012-04-11T08:23:34.490 に答える
1

私はあなたの質問を正しく理解したかどうか確信が持てません。私が理解していることから、次のループが役に立ちます。

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;
  }
}
于 2012-04-11T08:29:03.707 に答える
1 
for(i=0;i<=100;i++){
  if(i%4==1){
    $("#mydiv").append("<span class="highlight">"+i+"</span>");
  } else {
    $("#mydiv").append("<span>"+i+"</span>");
  }
}
于 2012-04-11T08:24:05.133 に答える
1

nth-childセレクターを使用する必要があります

$('#mydiv span:nth-child(4n+1)').addClass('highlight');
于 2012-04-11T08:25:41.357 に答える
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>");
   }
 }

これでうまくいくはずです。私はそれをテストしていません..乾杯

于 2012-04-11T08:59:37.160 に答える