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

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

最后还是想到了最简单的方法：遍历每一项内容用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. 【HDOJ6579】Operation（线性基）

    题意:给定一个数列a,给定两种操作: 1.询问[l,r]区间内最大的xor和 2.n++,a[n]赋值为x 要求强制在线 n,m<=5e5,a[i]<2^30 思路:同CF1100F 固定 ...

  2. RHEL/CentOS通用性能优化、安全配置参考

    RHEL/CentOS通用性能优化.安全配置参考 本文的配置参数是笔者在实际生产环境中反复实践总结的结果,完全适用绝大多数通用的高负载.安全性要求的网络服务器环境.故可以放心使用. 若有异议,欢迎联系 ...

  3. react教程 — redux

    一.概念:             http://caibaojian.com/react/redux-basic.html   或  https://www.cnblogs.com/maopixin ...

  4. HTML最全标签

    一.HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(DTD).   标签:a 说明:标明超链接的起始或目的位置.   标签:acronym 说明:标明缩写词.   ...

  5. 学会如何使用,pycharm,和gitlanb

    好好看,好好学.这才是正确的. 1  在pycharm 里面选择checkout as  切换分支 2    选择自己提交的,然后选择审核人.是强哥

  6. Mongodb 性能测试

    测试硬件环境 MacPro 处理器名称: Intel Core i7 处理器速度: 2.5 GHz 处理器数目: 1 核总数: 4 L2 缓存(每个核): 256 KB L3 缓存: 6 MB 内存: ...

  7. 在线清空nohup.out内容

    通过 cat /dev/null > filename 命令可以在线清空nohup.out里的内容

  8. md5加密 和拉钩网的登录

    #使用requests模块 #1.登录lagou #2.登录人人,保存个人首页 import requests from urllib import parse #hashlib是MD5加密的一个py ...

  9. txt文本程序 打开python文件 另存为原来的文件名，不能覆盖原来的文件解决

    txt文本程序 打开python文件 另存为原来的文件名,不能覆盖原来的文件 如:1.py文件用txt文本程序打开后,另存为 1.py,保存完毕后,不覆盖1.py文件,会生成 1.py.txt文件 原 ...

  10. JVM系列（一） — Jvm内存模型

    总结自<深入理解java虚拟机> 很多博客在讲虚拟机内存模型时,比较宽泛或者粗化,甚者,不准确,以下是我的一个笔记照片 运行时数据区可以分为两部分:线程共享区和线程私有区 一.线程共享区 ...