我的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 ...
随机推荐
-
【BZOJ1257】【CQOI2007】余数之和sum
Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值,其中k mod i表示k除以i的余数.例如j(5, ...
-
mongoose深层修改问题
https://cnodejs.org/topic/50dde64ea7e6c6171a80a678 各位大神好,好久没写点什么东西了,最近也是cnode社区不知道咋的了都登录不进去,今天总算能回到这 ...
-
SrcollView分页加载数据(第二种方法 自定义listView)
package com.baidu.ms; import android.content.Context;import android.util.AttributeSet;import android ...
-
c programming language ___ 5_2.c
#include <stdio.h> #include <ctype.h> #define BUG printf("here!bug!\n"); int g ...
-
C#设计模式学习资料--观察者模式
http://www.cnblogs.com/promise-7/archive/2012/05/14/2500759.html http://www.cnblogs.com/zhenyulu/art ...
-
Spring各种注解标签作用详解
@Autowired和@Resource等注解是将Spring容器中的bean注入到属性,而@Component等注解是将bean放入Spring容器中管理. @Autowired spring2.1 ...
-
select语句返回结果的顺序问题 .
今天看到论坛上一个朋友的回帖内容,突然意识到自己好像从来没对SELECT语句做过任何思考,即便SELECT是平时使用最多的语句.自己建了两个测试表,内容如下: SQL> conn scott/t ...
-
软件开发顶尖高手的杀手锏SQL语句
软件开发顶尖高手的杀手锏SQL语句 ...
-
gitlab自动备份和定时删除
GitLab数据手动备份1.GitLab默认备份目录为/var/opt/gitlab/backups,可以修改/etc/gitlab/gitlab.rb里面的默认存放备份文件目录,这里使用默认备份目录 ...
-
动态渲染页面爬取(Python 网络爬虫) ---Selenium的使用
Selenium 的使用 Selenium 是一个自动化测试工具,利用它可以驱动浏览器执行特定的动作,如点击.下拉等操作,同时还可以获取浏览器当前呈现的页面的源代码,做到可见即可爬.对于一些JavaS ...