jquery实现给循环的每一项加上不同的样式
2021-06-21 12:05
标签：his back 项目 简单的 blog 遍历 并且 说明 颜色 项目中需要实现这样的效果，模块中需要展示若干的商品，这些商品的分类名称需要显示不同的背景色，一共提供了三种背景色做选择， 这样的话就需要用这三种颜色做循环，一开始我的思路是做随机分配颜色，但是这样的话效果不好并且分配不匀；再次想用循环或者遍历的方法但是都走不通； 最后还是想到了最简单的方法：遍历每一项内容用if语句来判断，主要的思路就是获取每一商品模块的index跟3相除的余数来分配对应的颜色（如果是四种颜色的话除以4）。 直接用一个简单的小案例来说明： jquery实现给循环的每一项加上不同的样式 标签：his back 项目 简单的 blog 遍历 并且 说明 颜色 原文地址：http://www.cnblogs.com/moumou0213/p/7181963.htmlDOCTYPE html>
html lang="en">
head>
meta charset="utf-8">
style>
.color0{
background: red;
}
.color1{
background: blue;
}
.color2{
background: pink;
}
style>
head>
body>
ul>
li>项目1li>
li>项目2li>
li>项目3li>
li>项目4li>
li>项目5li>
li>项目6li>
li>项目7li>
li>项目8li>
ul>
script src="jquery-1.7.2.min.js">script>
script>
$(‘ul li‘).each(function() {
var num = $(this).index();
var rem = num % 3;
if (rem == 0) {
$(this).addClass(‘color0‘);
} else if(rem == 1) {
$(this).addClass(‘color1‘);
} else if(rem == 2) {
$(this).addClass(‘color2‘);
};
});
script>
body>
html>
下一篇：理解HTTP协议