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

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

最后还是想到了最简单的方法：遍历每一项内容用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. 【HDOJ6609】Find the answer（线段树）

    题意:给定一个n个正整数的数列,第i项为w[i],对于每个i,你要从[1,i-1]中选择一些变成0,使得变化后[1,i]的总和小于m,每次询问最少要变几个 n<=2e5,m<=1e9,1& ...

  2. python最近邻分类器KNN算法

    1. KNN算法 邻近算法,或者说K最近邻(kNN,k-NearestNeighbor)分类算法是数据挖掘分类技术中最简单的方法之一.所谓K最近邻,就是k个最近的邻居的意思,说的是每个样本都可以用它最 ...

  3. 最长回文子串 —— Manacher (马拉车) 算法

    最长回文子串 回文串就是原串和反转字符串相同的字符串.比如 aba,acca.前一个是奇数长度的回文串,后一个是偶数长度的回文串. 最长回文子串就是一个字符串的所有子串中,是回文串且长度最长的子串. ...

  4. Egyptian Collegiate Programming Contest 2017 (ACM ECPC 2017) - original tests edition

    题目链接:https://codeforces.com/gym/101856 D. Dream Team 题意:n个点,让你连边成为一棵树,边权为顶点的GCD(u,v).求所有边权和的最大值. 思路: ...

  5. QT简介及下载

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Qt是一个1991年由奇趣科技开发的跨平台C++图形用户界面应用程序开发框架.它既可以开发GUI程序,也可用于开发非GUI 程序,比如控制 ...

  6. MySQL-mysql_config_editor安全登录工具

    mysql_config_editor出现在mysql5.6.6以后的版本,可以给指定的连接和密码生成一个加密文件.mylogin.cnf,默认位于当前用户家目录下.通过该文件可以使用mysql.my ...

  7. JS实现上传图片的三种方法并实现预览图片功能

    地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...

  8. mysql数值字符串类型的按照数值进行排序

    今天遇到一个问题,就是对mysql数值字符串类型进行排序,在默认情况下使用order by 字段名称 desc/asc 进行排序的时候,mysql进行的排序规则是按照ASCII码进行排序的,并不会自动 ...

  9. Python字符串前缀

    1,r/R表示raw string(原始字符串) #!/usr/bin/python str1 = 'hello \n world' str2 = r'hello \n world' print(st ...

  10. sublime中使用插件anaconda而在代码中出现方框

    这个标志是说不符合PEP8标准,比如使用了Tab做缩进:一行过长等问题. 可以在可以在 Sublime > Preferences > Package Settings > Anac ...