jquery实现给循环的每一项加上不同的样式
Posted moumou
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery实现给循环的每一项加上不同的样式相关的知识,希望对你有一定的参考价值。
项目中需要实现这样的效果,模块中需要展示若干的商品,这些商品的分类名称需要显示不同的背景色,一共提供了三种背景色做选择,
这样的话就需要用这三种颜色做循环,一开始我的思路是做随机分配颜色,但是这样的话效果不好并且分配不匀;再次想用循环或者遍历的方法但是都走不通;
最后还是想到了最简单的方法:遍历每一项内容用if语句来判断,主要的思路就是获取每一商品模块的index跟3相除的余数来分配对应的颜色(如果是四种颜色的话除以4)。
直接用一个简单的小案例来说明:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .color0{ background: red; } .color1{ background: blue; } .color2{ background: pink; } </style> </head> <body> <ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> <li>项目4</li> <li>项目5</li> <li>项目6</li> <li>项目7</li> <li>项目8</li> </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>
以上是关于jquery实现给循环的每一项加上不同的样式的主要内容,如果未能解决你的问题,请参考以下文章