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

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

转载于:https://www.cnblogs.com/keytree/p/5205879.html

相关资源：jQuery动态生成隔行变色的table