jq 个性的隔行变色

效果图大致这样:

  我的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比较好?

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

时间: 2024-10-14 13:56:38

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

用angular实现隔行变色

在写隔行变色时应该知道的几个指令.ng-app :angular入口,ng-repeat:控制重复,ng-cloak:防止闪烁,用法就是给一个class="ng-cloak",在样式表中写好 .ng-cloak{display:none}angular会在解析完代码时清除ng-cloak.还有另外一个防止闪烁的指令只ng-bind.当它作为标签属性时是不会显示出来的比如 <p ng-bind="msg"></p> 这个msg就不会出现闪烁.

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

(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#000000; cursor:hand; width:100%; }td { onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgro

jquery实现html表格隔行变色

效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 实现表格隔行变色 </title> 5 <meta h

使一个特定的表格隔行变色(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>使一个特定的表格隔行变色</title> <script src="jquery-1.7.1.min.js" ty

10.2 隔行变色的表格

本案例中,我们对一个简单的表格进行设置,使它看起来更为精致.另外,当表格的行和列都很多,并且数据量很大的时候,为避免单元格采用相同的背景色会使浏览者感到凌乱,发生看错行的情况,为表格设置隔行变色的效果,使得奇数行和偶数行的背景颜色不一样.实例的最终效果如图1所示. 实例文件位于网页学习网CSS教程资源的“第10章\02\pretty-1.htm”. 图1 交替变色的表格样式 一.搭建HTML结构 首先确定表格的HTML结构,代码如下: 折叠展开XML/HTML 代码复制内容到剪贴板 <table

如何使用jQuery实现隔行变色效果

如何使用jQuery实现隔行变色效果:隔行变色效果在网站有大量应用,尤其是在类似新闻列表这样的功能,对于行与行之间的区分有很大的好处,也提高了网站的人性化程度,虽然是个小功能,但是网站的流量都是从这样的小功能点点滴滴积累起来的.此效果可以使用CSS实现,但是由于现有浏览器对于CSS3支持度还不够好,所以使用js或者jQuery是不错的选择,下面就介绍一下如何使用jQuery实现此种效果.代码实例如下: 1 <!DOCTYPE html> 2 <html> 3 <head>

jquery实现的隔行变色代码实例

jquery实现的隔行变色代码实例: 隔行变色效果在大量的网站应用,尤其是表格或者新闻列表之类的结构,可以有效增强网站的辨识度,更为人性化,下面通过一个简单的实例介绍一下它的实现原理,至于它的美观度这里就不讲究了,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:/

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

介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和OptionsView-->EnableAppearanceOddRow-->true;然后设置奇数行和偶数行样式颜色等:Appearance-->EvenRow和Appearance-->OddRow.设计完成后,设计器出现隔行变色效果,如图: 2.设置奇偶行样式时,会看到其他行样式.App

表格隔行变色-js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-