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

而後，貼上大神的指導。雖然看得半懂不懂 (●˘◡˘●)