效果图大致这样:

  我的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. spring bean的生命周期

    掌握好spring bean的生命周期,对spring的扩展大有帮助.  spring bean的生命周期(推荐看)  spring bean的生命周期

  2. Django 前后台的数据传递

    Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...

  3. [转]Web APi之认证(Authentication)及授权(Authorization)【一】(十二)

    本文转自:http://www.cnblogs.com/CreateMyself/p/4856133.html 前言 无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请 ...

  4. S5PV210_流水灯

    1.整体思路:把相应的配置数据写入相应的寄存器,控制GPIO电平(Led.s)——运用工程管理Makefile编译.链接文件(由Led.s编译得到led.bin,该文件用于USB启动方式点亮LED,若 ...

  5. 例解 Linux 下 Make 命令

    Linux 下 make 命令是系统管理员和程序员用的最频繁的命令之一.管理员用它通过命令行来编译和安装很多开源的工具,程序员用它来管理他们大型复杂的项目编译问题.本文我们将用一些实例来讨论 make ...

  6. 数据库 数据库SQL语句三

    转换函数 to_char()字符串转换日期函数 --查询大于某个日期的员工信息 select * from emp where hiredate>to_date('1980-02-12','yy ...

  7. [LeetCode] Sliding Window Maximum 滑动窗口最大值

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  8. 理解"熵"

    熵描述了事物的混乱程度 一个变量x,它的可取值为x1,x2,x3,x4.当它取值为这几个值时,概率分别为p1,p2,p3,p4.那么这个混乱程度就可以描述为f(p1,p2,p3,p4). 二元取值时熵 ...

  9. 【WPF】GridLengthAnimation

    参考 : http://zhidao.baidu.com public class GridLengthAnimation : AnimationTimeline { public static re ...

  10. Js数组

    参考:http://www.w3school.com.cn/jsref/jsref_obj_array.asp 一.数组定义 1.  var arr= [1,2,3]; 2.  var arr= ne ...