jquery實現給迴圈的每一項加上不同的樣式

來源:互聯網
上載者:User

標籤:his   back   項目   簡單的   blog   遍曆   並且   說明   顏色   

項目中需要實現這樣的效果,模組中需要展示若干的商品,這些商品的分類名稱需要顯示不同的背景色,一共提供了三種背景色做選擇,

這樣的話就需要用這三種顏色做迴圈,一開始我的思路是做隨機分配顏色,但是這樣的話效果不好並且分配不勻;再次想用迴圈或者遍曆的方法但是都走不通;

最後還是想到了最簡單的方法:遍曆每一項內容用if語句來判斷,主要的思路就是擷取每一商品模組的index跟3相除的餘數來分配對應的顏色(如果是四種顏色的話除以4)。

直接用一個簡單的小案例來說明:

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <style>        .color0{            background: red;        }        .color1{            background: blue;        }        .color2{            background: pink;        }    </style></head><body>    <ul>        <li>項目1</li>        <li>項目2</li>        <li>項目3</li>        <li>項目4</li>        <li>項目5</li>        <li>項目6</li>        <li>項目7</li>        <li>項目8</li>    </ul>    <script src="jquery-1.7.2.min.js"></script>    <script>        $(‘ul li‘).each(function() {            var num = $(this).index();            var rem = num % 3;                        if (rem == 0) {                $(this).addClass(‘color0‘);            } else if(rem == 1) {                $(this).addClass(‘color1‘);            } else if(rem == 2) {                $(this).addClass(‘color2‘);            };        });    </script></body></html>

 

jquery實現給迴圈的每一項加上不同的樣式

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.