效果图大致这样:

  我的html格式部分这样:
/*不过他们都说我的dom结构不太合理,同意。BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/
<div class="pro_detail">
<!-- 列表详细信息 -->
<ul>
<li>001</li>
<li>椰香奶茶</li>
<li>¥ 10.00</li>
<li>¥ 10.50</li>
<li>-5%</li>
</ul>
</div>

下面是JQ代码部分(插入进来变得红红的是啥意思?):

            //变色效果
function oChange(){
var oUl = $(".pro_detail ul").length;
for ( var t =0; t<oUl ;t++){ //原来的颜色
$(".pro_detail ul").eq(t).find('li').eq(3).css({
"color" : "blue"
});
$(".pro_detail ul").eq(t).find('li').eq(4).css({
"color" : "blue"
});
}//for
for ( var a =0; a<oUl ;a++){
var s = Math.floor(a%2)+1;
if(s){
a = a+2;//隔两个变色
$(".pro_detail ul").eq(a).find('li').eq(3).css({
"color" : "red"
});
$(".pro_detail ul").eq(a).find('li').eq(4).css({
"color" : "red"
}); }//if
} //for } oChange();

对jq还不太熟,用很蹩脚的方法写成了这样,可能要贻笑大方之家。有重复的代码,比如,第三个li和第四个li变色的那个地方,我是直接复制的一样的。但是,现在还不知道怎样优化呢?就先这样吧。大神告诉我说,jq里面循环不要用for,用each比较好?

然后,贴上大神的指导。虽然看得半懂不懂 (●˘◡˘●)
 
 
 
 
 

jq 个性的隔行变色的更多相关文章

  1. JQuery实现隔行变色和突出显示当前行 效果

    运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...

  2. jQuery中的几个案例:隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  3. jQuery知识点二 实现隔行变色

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  4. css 隔行变色,表单布局

    隔行变色: #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行  #list1 li:nth-of-type(even){ background:# ...

  5. jquery实现html表格隔行变色

    效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...

  6. 简单的css js控制table隔行变色

    (1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...

  7. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  8. JS实现隔行变色,鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)

    介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和Opti ...

随机推荐

  1. git的学习

    学习怎么使用git这个分布式版本控制系统 学习资源 廖雪峰的git教程 Git的官方文档 Git命令列表 Git参考手册 中文 https://www.dropbox.com/s/sp2eupl8tp ...

  2. MongoDB 导出、导入表

    var srcTbl = "20161226"; var destTbl = "20161226-bak";   方式一: MongoClient client ...

  3. 腾讯GT的流畅度测试方案研究

    GT源码:https://github.com/TencentOpen/GT 一.流畅度模块的代码结构 流畅度插件总共就几个类,其实处理方式也比较简单粗暴,就是通过Choreographer输出的lo ...

  4. Django基础,Day1 - 环境安装与pycharm创建django项目

    Django是一个高级Python Web框架,支持快速部署,清理和实用的设计.它可以被轻易部署和提供实用的组件,而开发人员只需要专注于写自己的应用程序,而不需要重复造轮子.并且Django是自由和开 ...

  5. [LeetCode] Binary Tree Maximum Path Sum 求二叉树的最大路径和

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  6. D3D三层Texture纹理经像素着色器实现渲染YUV420P

    简单记录一下这两天用Texture实现渲染YUV420P的一些要点. 在视频播放的过程中,有的时候解码出来的数据是YUV420P的.表面(surface)通过设置参数是可以渲染YUV420P的,但Te ...

  7. Linux常用获取进程占用资源情况手段

    测试环境:Ubuntu14.04 1.  获取进程ID号 ps -aux | grep your_process_name 例如: xxx@xxx:~$ ps -e |grep Midlet|awk ...

  8. 语义网 (Semantic Web)和 web 3.0

    语义网=有意义的网络. "如果说 HTML 和 WEB 将整个在线文档变成了一本巨大的书,那么 RDF, schema, 和 inference languages 将会使世界上所有的数据变 ...

  9. 【C#】新建服务自动发送邮件

    ---windows服务,---自动发送邮件 邮件发送code #region 发送邮件函数 public void SendMailUseZj() { System.Net.Mail.MailMes ...

  10. string常用函数

    1.addslashes($str); //转义时str中的所有特殊字符 stripslashes($str) //还原 2.bin2hex($str); //将2进制转成16进制 3. echo c ...