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

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

最后还是想到了最简单的方法：遍历每一项内容用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. wangeditor 粘贴word内容带样式

    这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下) ...

  2. windows防火墙批量开放端口

    windows自带的防火墙没有增加端口范围的功能,这让一些常见的配置变得非常麻烦(比如FTP被动模式下,就需要在防火墙上开启端口范围),经过查询资料,使用以下cmd批处理内容,即可增加端口范围: ec ...

  3. [CSP-S模拟测试]:weight（Kruskal+树链剖分）

    题目描述 给你一个$n$个点$m$条边的带边权的无向图(无重边,无自环),现在对于每条边,问你这条边的权值最大可以是多大,使得这条边在无向图的所有最小生成树中?(边权都是整数). 输入格式 第一行包含 ...

  4. inputAccessoryView，inputView

    我们在使用UITextView和UITextField的时候,可以通过它们的inputAccessoryView属性给输入时呼出的键盘加一个附属视图,通常是UIToolBar,用于回收键盘. 但是当我 ...

  5. Java操作Redis小案例

    1.下载jar包. http://download.csdn.net/detail/u011637069/9594840包含本案例全部代码和完整jar包. 2.连接到redis服务. package ...

  6. pytest_用例运行级别_模块级

    ''' pytest 参数说明 https://www.jianshu.com/p/7a7432340f02 -x test_fixt_model.py 遇到错误时,停止运行 用-v运行(-v显示运行 ...

  7. UIsearchBar 自定义样式

    对于修改输入框圆角 的需求, 可以通过修改搜索框背景图片的方式设置. - (void)setSearchFieldBackgroundImage:(nullable UIImage *)backgro ...

  8. 数据结构C语言实现

    顺序表实现 typedef int Position; typedef struct LNode *List; struct LNode { ElementType Data[MAXSIZE]; Po ...

  9. EasyUI的datagrid表格行高度增加

    这里以easyui的default样式为例: 找到easyui--->themes-->default-->easyui.css-->Ctrl+F找到.datagrid-row ...

  10. JavaScript对象的property属性详解

    JavaScript对象的property属性详解:https://www.jb51.net/article/48594.htm JS原型与原型链终极详解_proto_.prototype及const ...