3

我有一个 javascript 循环并想突出显示一些数字

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

现在我想每 4 次选择 1、5、9、13、17...，但从 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

您可以使用第 n 个子选择器来完成此操作。看到这个 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 
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

您应该使用第n 个子选择器

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