Question

我正在尝试通过jquery在li元素上重复背景颜色模式的方法。现在，我正在为每种特定的背景颜色使用类。我知道必须有一种更简单的方法让相同的模式通过jquery重复列表。就像每五分之一应该是黄色，每一秒蓝色，依此类推。最终，li将从外部数据动态添加，因此我需要它更加自动化。

这是我的JS小提琴的链接：http://jsfiddle.net/4nYJj/2/

任何建议都会很棒！谢谢！

Big D

Answer 1

使用jQuery：

$('ul li').each(function(i) {
    $(this).addClass('liClass' + i%5);
});

为此，您必须将li班级名称更改为liClass0 .. liClassN。

DEMO

Answer 2

如果CSS3是一个选项，您可以执行以下操作：

ul li:nth-child(5n+1){
    background-color: yellow;
}

http://jsfiddle.net/4nYJj/5/

Answer 3

完成加载后，你可以在它们上运行一个函数，根据你从1开始的变量添加类，并在每次循环运行时递增，并在它达到5后重置为1。

像这样。

$(document).ready(function(){
var i = 1;
$('#dyno_ul li').each(function(){
if(i == 1){$(this).addClass('first');i++;}
....
if(i == 5){$(this).addClass('fifth');i = 1;}

});});

Answer 4

虽然使用jquery很可能这样做，但我认为这可能是一种过度杀伤力。 CSS绝对是处理这类工作的更好方法。 CSS3为您提供了像nth-child这样的伪类，可以很好地利用它来获得所需的结果而不费吹灰之力。

ul li:nth-child(5n+1) {
    background-color: yellow;
}

ul li:nth-child(5n+2) {
    background-color: blue;
}

ul li:nth-child(5n+3) {
    background-color: purple;
}

ul li:nth-child(5n+4) {
    background-color: red;
}

ul li:nth-child(5n) {
    background-color: green;
}

请查看 - http://jsfiddle.net/dhruvasagar/hRHp3/

Answer 5

JQuery：

var i = 1;
$('li').each(function(){
    $(this).addClass('alt' + i);
    i = (i == 5) ? 1 : i + 1;
});

CSS：

.alt1 {
    background-color: yellow;
}

.alt2 {
    background-color: blue;
}

.alt3 {
    background-color: purple;
}

.alt4 {
    background-color: red;
}

.alt5 {
    background-color: green;
}

演示：http://jsfiddle.net/AlienWebguy/VbVvZ/

Answer 6

使用css3-nth选择器，您可以简单地选择那些没有js

的选择器

ul li:nth-child(5n+1){
    background-color: yellow;
}

ul li:nth-child(5n+2){
    background-color: blue;
}

ul li:nth-child(5n+3){
    background-color: purple;
}

ul li:nth-child(5n+4){
    background-color: red;
}

ul li:nth-child(5n+5){
    background-color: green;
}

使用js可以使用模数

执行此操作

  $('li').each(function(){
      if (c % 1 == 0) {  cls = 'first';  }
      if (c % 2 == 0) {  cls = 'second';  }    
      if (c % 3 == 0) {  cls = 'third';  }
      if (c % 4 == 0) {  cls = 'fourth';  }
      if (c % 5 == 0) {  cls = 'fifth';  }

      $(this).attr('class',cls);
      if (++c >= 5) {
        c = 0;
      };
  });

通过jquery重复背景颜色模式？

6 个答案: