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

【问题标题】：Repeating background color pattern through jquery?通过jquery重复背景颜色模式？
【发布时间】：2012-02-08 00:12:51
【问题描述】：

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

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

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

大D

【问题讨论】：

标签： jquery css json

【解决方案1】：

使用 jQuery：

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

为此，您必须将您的 li 类名更改为 liClass0 .. liClassN。

DEMO

【讨论】：

很好的解决方案，感谢一百万！ nth-child 会很好用，但我必须支持 IE
您可以安全地结合这两种方法，这样即使 JS 被禁用，它也可以在现代浏览器中工作。（使用li:nth-child(5n+1), .liClass0等）

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

加载完成后，您可以在它们上运行 each 函数，根据从 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;}

});});

【讨论】：

啊，我得查一下。哈哈。

【解决方案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/

【讨论】：

这是一个很好的解决方案，唯一的问题是我需要支持 IE7+，我不相信 IE 支持 nth-child。

【解决方案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/

【讨论】：

【解决方案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;
      };
  });

【讨论】：