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>
原文地址:https://www.cnblogs.com/moumou0213/p/7181963.html