【特效】给元素循环添加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);
};
});
【特效】给元素循环添加class的更多相关文章
- JS给元素循环添加事件的问题
<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...
- JS闭包机制实现为DOM元素循环添加事件
HTML代码: <button type='button' class='btn' id='1'>按钮1</button> <button type='button' c ...
- 【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- 【PAT】1008. 数组元素循环右移问题 (20)
1008. 数组元素循环右移问题 (20) 一个数组A中存有N(N>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(M>=0)个位置,即将A中的数据由(A0A1……AN- ...
- select(有局限性),jq循环添加select的值
加载的时候改变select的默认值,只需改变select的value值 $("#one").val(@ViewBag.val);//@ViewBag.val是要默认选中的值的val ...
- PAT自测_打印沙漏、素数对猜想、数组元素循环右移、数字加倍重排、机器洗牌
-自测1. 打印沙漏() 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号 ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- js循环添加事件的问题
1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...
- PAT乙级 1008. 数组元素循环右移问题 (20)
1008. 数组元素循环右移问题 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 一个数组A中存有N(N>0)个整数,在不允 ...
随机推荐
- 第二次项目冲刺(Beta阶段)5.24
1.提供当天站立式会议照片一张 会议内容: ①检查前一天的任务情况. ②制定新一轮的任务计划. 2.每个人的工作 (1)工作安排 队员 今日进展 明日安排 王婧 #63Web输出以文件名为标题 #63 ...
- 201521123030《Java程序设计》第5周学习总结
1. 本周学习总结 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 因为i在类中是priv ...
- 201521123057 《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123049 《JAVA程序设计》 第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- MarkDown 例子
一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...
- Junit4学习(三)Junit运行流程
一,验证Junit测试方法的流程 1,在test/com.duo.util右键,新建测试类 2,生成后的代码: package com.duo.util; import static org.juni ...
- springmvc05-Spring+Springmvc+Hibernate实现简单的用户管理系统
1, 导入\spring-framework-3.2.4.RELEASE\libs\disk下所有包; hibernate-distribution-3.6.7.Final\lib\required下 ...
- java如何将html过滤为纯文本
java开发中jsp页面可以嵌套很多插件就可以将html形式的文本直接转化为纯文本,但是如果你已经保存下来或者没有运用插件,这个额html形式的文本你该怎么转化为纯文本呢?有次我将公告保存了html形 ...
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...
- c# 第一节课 一些简单的应用
注册要钱 我没钱