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

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

最后还是想到了最简单的方法：遍历每一项内容用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. excle里边的数据怎么导入oracle数据库

    方式一:(不正式) select出的列数与已经准备好的excle中的列数相同.select  xh,name from 表名 where xh = 'ghf' for update;  (查不到任何结 ...

  2. bugku | sql注入2

    http://123.206.87.240:8007/web2/ 全都tm过滤了绝望吗? 提示 !,!=,=,+,-,^,% uname=admin&passwd=1' and '1 : 一个 ...

  3. [CSP-S模拟测试]:Lost My Music（凸包）

    题目描述 小$w$在天堂看到了一棵世界树.世界树上有$n$个节点,其中$1$节点为根,每个节点有一个正整数权值$c_i$.现在小$w$想要对每个节点$u$求出它的祖先$v$中$\frac{c_v-c_ ...

  4. SQL学习记录：函数(二)

    字符串函数 1.获取字符的ASCII码 语法结构: ASCII(espression)    这里的expression是一个返回char或varchar数据类型的表达式,ASCII函数仅对表达式最左 ...

  5. 建站手册-网站建设： Web 标准

    ylbtech-建站手册-网站建设: Web 标准 1.返回顶部 1. http://www.w3school.com.cn/site/site_standards.asp 2. 2.返回顶部 1. ...

  6. VS2015 编写C++的DLL，并防止DLL导出的函数名出现乱码（以串口通信为例，实现串口通信）

    参考链接:https://blog.csdn.net/songyi160/article/details/50754705 1.新建项目 建立好的项目界面如下: 接着在解决方案中找到[头文件]然后右击 ...

  7. Nginx负载均衡之TCP/UDP流

    负载均衡是指在多个后端服务器之间有效地分配网络流量. 从NGINX Plus R5[1] 版本开始可以代理和负载均衡传输控制协议(Transmission Control Protocol,TCP)通 ...

  8. MongoDB简单认识

    MongoDB 为何物 NoSQL 泛指非关系型数据库,该词是关系型数据库(即 SQL)的相对称呼.MongoDB 是非关系型数据库中较为人熟知的一种. 它拥有很多优秀特性,例如高性能.高可用.支持丰 ...

  9. vue2.0 项目小总结

    最近做了一个vue的PC端的项目,不大,真正用到vue的东西也不是太多,逻辑处理用到了不少原生js东西. 1.图片渲染 后台返回base64格式数据,一开始绑定src,提示pic字段未定义,懵逼了好久 ...

  10. ABAP字符串处理

    字符串中包含单引号:单引号前面再加一个单引号 例:jest~stat = 'E0002' jest~stat = 'E0003' OR jest~stat = 'E0004' IF z_stat IS ...