【特效】給元素循環添加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); }; });