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

经常会遇到给元素循环添加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);
};

});

发表评论

电子邮件地址不会被公开。 必填项已用*标注