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

jq 个性的隔行变色的更多相关文章
- JQuery实现隔行变色和突出显示当前行 效果
运行效果如下图: jquery关键代码: <script type="text/javascript"> //该文件为:js.js // 当鼠标移到表格上是,当前一行背 ...
- jQuery中的几个案例:隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- jQuery知识点二 实现隔行变色
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- css 隔行变色,表单布局
隔行变色: #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 #list1 li:nth-of-type(even){ background:# ...
- jquery实现html表格隔行变色
效果图 实现代码: 通过css控制样式,利用jquery的addClass方法实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans ...
- 简单的css js控制table隔行变色
(1)用expression 鼠标滑过变色: <style type="text/css"><!-- table { background-color:#0000 ...
- jquery插件之表格隔行变色并鼠标滑过高亮显示
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...
- JS实现隔行变色,鼠标移入高亮
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置(改变)显示值、固定列不移动(附源码)
介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和Opti ...
随机推荐
- [转]How to: Create a Custom Principal Identity
本文转自:https://msdn.microsoft.com/en-us/library/aa702720(v=vs.110).aspx The PrincipalPermissionAttribu ...
- 移动前端手机输入法自带emoji表情字符处理
今天,测试给我提了一个BUG,说移动端输入emoji表情无法提交.很早以前就有思考过,手机输入法里自带的emoji表情,应该是某些特殊字符.既然是字符,那应该都能提交才对,可是为啥会被卡住呢?搜了一下 ...
- Leetcode, construct binary tree from inorder and post order traversal
Sept. 13, 2015 Spent more than a few hours to work on the leetcode problem, and my favorite blogs ab ...
- 【转】前端工程师必须了解的 谷歌 HTML/CSS 规范
背景 这篇文章定义了 HTML 和 CSS 的格式和代码规范,旨在提高代码质量和协作效率. 通用样式规范 协议 省略图片.样式.脚本以及其他媒体文件 URL 的协议部分(http:,https:),除 ...
- js中typeOf用法
JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据. typeof 可以用来检测给定变量的数据类型,可能的返回值:1. 'undefined' --- 这个值未定义: 2. 'boole ...
- PAT 1050. 螺旋矩阵(25)
本题要求将给定的N个正整数按非递增的顺序,填入"螺旋矩阵".所谓"螺旋矩阵",是指从左上角第1个格子开始,按顺时针螺旋方向填充.要求矩阵的规模为m行n列,满足条 ...
- 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- [LeetCode] Fizz Buzz 嘶嘶嗡嗡
Write a program that outputs the string representation of numbers from 1 to n. But for multiples of ...
- 不装mono,你的.NET程序照样可以在Linux上运行!
让.NET应用程序在linux上运行,目前通用的做法就是在Linux上安装mono,然后通过”mono your.exe“命令运行这个程序. 这种运行.net程序的办法有两个弱点,一个是需要客户机安装 ...
- EF查询之性能优化技巧
上一篇:EF使用CodeFirst方式生成数据库&技巧经验 前言 EF相信大部分同学都已经经常使用了,可是你的查询高效吗? 今天我就以个人使用经验来讲讲在使用EF做查询的时候大家都容易忽略的性 ...