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-child选择器，但不仅仅是通过CSS直接推荐nth-child样式。

在样式表中：

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

Answer 2

您可以使用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;
}

Answer 3

看看这个： http://api.jquery.com/nth-child-selector/

example

Answer 4

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

Answer 5

您应该使用nth-child选择器

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

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

这应该这样做。我没有测试过它..干杯

突出显示简单的数字行？

7 个答案: