【特效】给元素循环添加class

（个人博客网站中的原文：http://www.xiaoxianworld.com/archives/321，欢迎遇到的小伙伴常来瞅瞅，给点评论和建议，有错误和不足，也请指出。）

常常会遇到给元素循环添加class的效果，例以下面这个图

每一个模块的背景色和图标都不相同，可是呢，模块的数量又不肯定，说不定有几十个，那我不能设计几十个图标吧，因此，能够作成每9个一循环，也就是第10个与第1个的样式相同，第11个与第2个的样式相同，依次类推。

 

还有表格中也常常遇到：

给表格的每一行设置背景色，每5行循环一次，表格的行数天然也是不肯定的。

 

因此就须要几行js代码，例用for循环，给元素循环添加class。代码很简单，就是每次写的时候，老是在循环代码中调试，究竟是从0开始？仍是从1开始？循环的结点，是谁减谁?数据怎么个对应关系？每次都想也比较麻烦，费时间，因而，整理一份代码，之后再遇到直接拿来用就能够啦。 

特地写了一个七彩虹背景色的简单demo

代码以下：

html:

<ul class="box">
<li>第1行</li>
<li>第2行</li>
<li>第3行</li>
<li>第4行</li>
<li>第5行</li>
<li>第6行</li>
<li>第7行</li>
<li>第8行</li>
<li>第9行</li>
<li>第10行</li>
<li>第11行</li>
<li>第12行</li>
<li>第13行</li>
<li>第14行</li>
</ul>

css:

.box{ list-style:none;}
.box li{ height:40px; line-height:40px; border-bottom:1px solid #ddd;}
.box1{ background:#FF0000;}
.box2{ background:#FF7F00;}
.box3{ background:#FFFF00;}
.box4{ background:#00FF00;}
.box5{ background:#00FFFF;}
.box6{ background:#0000FF; color:#fff;}
.box7{ background:#8B00FF; color:#fff;}

js:

$(document).ready(function(){ var one=$(".box li"); //选择须要操做的元素单位 var len=one.length; //元素单位的数量 var n=7; //每n个循环添加 var str="box"; //添加的class名称 for(var i=1,j=1;i<=len;i++,j++){ if(i>n){j=i-n;} one.eq(i-1).addClass(str+j); }; });