项目中需要实现这样的效果，模块中需要展示若干的商品，这些商品的分类名称需要显示不同的背景色，一共提供了三种背景色做选择，

这样的话就需要用这三种颜色做循环，一开始我的思路是做随机分配颜色，但是这样的话效果不好并且分配不匀；再次想用循环或者遍历的方法但是都走不通；

最后还是想到了最简单的方法：遍历每一项内容用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实现给循环的每一项加上不同的样式的更多相关文章

  1. jquery 之for 循环

    jquery 的 for 循环: 1. var userList = [11,22,33,44]; $.each(userList,function(i,item){ console.log(i, i ...

  2. jquery跳出each循环

    答案是使用 return false;  切记哦,不是使用break;也不是直接使用return; jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不 ...

  3. jquery里面的循环的用法

    下面提一下jQuery的each方法的几种常用的用法 Js代码 var arr = [ "one", "two", "three", &qu ...

  4. jQuery中each循环的跳出和结束

    jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用ret ...

  5. JQuery跳出each循环的方法

    一.jquery each循环,要实现break和continue的功能: break----用return false; continue --用return ture; 二.jquery怎么跳出当 ...

  6. JQuery跳出each循环的方法(包含数组遍历）

    0. 前言 也许我们通过 jquery 的循环方法进行数组遍历,但是当不符合条件时,怎么跳出当前循环?(即用each方法内,当不满足条件时想break跳出循环体,想continue继续执行下一个循环遍 ...

  7. js 对于jquery each 多层循环的问题和原生js多层循环问题

    一.在jquery中,我们使用循环的时候,提供两种方式:jquery.each 和(循环体).each  两种方式不是同. 对于return 在作用这两个的函数的时候需要注意: 首先我们需要知道我们的 ...

  8. jQuery源码分析-jQuery中的循环技巧

    作者:nuysoft/JS攻城师/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 前记:本文收集了jQuery ...

  9. AngularJs ng-repeat解决循环对象出现重复项报错的问题

    问题:ng-repeat  的循环对象是不能出现重复项的,所以如果有重复的就会报错,应该是 key value的问题吧,不是很了解内部运行机制:经过查询发现 在 循环后面加上  track by $i ...

随机推荐

  1. k-近邻算法（kNN）准备数据：归一化数值

    #准备数据:归一化数值 def autoNorm(dataSet): #autoNorm()函数可以自动将数字特征值转换为0到1的区间 minVals = dataSet.min(0) maxVals ...

  2. 10.14 socket 网络编程

    简单的例子 socket客户端 import socket client = socket.socket() #声明socket类型,同时生成socket连接对象 client.connect(('l ...

  3. 使用lambda编写九九乘法表

    Java 8 出来有一段时间了,支持lambda表达式 非常的赞. lambda表达式 即匿名方法,属于一种轻量级的封装 lambda表达式的语法由参数列表.箭头符号->和函数体组成.函数体既可 ...

  4. 2018-2019-2 网络对抗技术 20165206 Exp7 网络欺诈防范

    - 2018-2019-2 网络对抗技术 20165206 Exp7 网络欺诈防范 - 实验任务 (1)简单应用SET工具建立冒名网站 (1分) (2)ettercap DNS spoof (1分) ...

  5. Oralce常用系统函数

    dual:Oracle系统内部提供的一个用于实现临时数据计算的特殊表,它只有一个列DUMMY (VARCHAR2(1)) 字符类函数: concat--连接字符串 initcap--每个单词首字母大写 ...

  6. 移动H5优化指南

    转载于http://isux.tencent.com/h5-performance.html 移动H5前端性能优化指南 概述 秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.7 ...

  7. git 忽略提交及已push过得文件忽略提交

    在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交 Git 忽略文件提交的方法 这种方式通过在项目的某个文件 ...

  8. js获取近十二个月

    1.获取近十二个月 var dataArr = []; var data = new Date(); var year = data.getFullYear(); data.setMonth(data ...

  9. Java并发Condition接口

    java.util.concurrent.locks.Condition接口提供一个线程挂起执行的能力,直到给定的条件为真. Condition对象必须绑定到Lock,并使用newCondition( ...

  10. 路由参数 query和params

    1. path:'www.baidu.com' query  { id:122 } 对应地址:http:'www.baidu.coom?id=122'   类似get方式 2.name:'baidu' ...