用js 給Repeater每三行加一張圖片，3組圖片循環

定義一個repeater：   

 <asp:Repeater runat="server" ID="rAllnews"  >

                    <ItemTemplate>
                   <div class="msg1" >//給repeater裏面的內容添加樣式
                   <div id="img" runat="server"></div>//放一個空的div,放圖片
                       <a href='<%#"http://ninja.o4games.com"+DataBinder.Eval(Container.DataItem, "url")%>'  title='<%#DataBinder.Eval(Container.DataItem, "title")%>' class="big_title">
                      <%#DataBinder.Eval(Container.DataItem, "title") %></a>
                      <div class="small_title"></div>
                      <div class="times"><%#Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "addDate")).Month + "/" + Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "addDate")).Day + "/" + Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "addDate")).Year%></div>
                     <div class="line"></div>
                 
               </div>
                    </ItemTemplate>

                </asp:Repeater>

樣式部分

<style type="text/css">
.img1{ width:110px;height:90px; background:url(http://ninja.o4games.com/images/new_tu.jpg) no-repeat;border-radius:14px;border:1px solid #6f1e00;transition:0.2s;cursor:pointer;}
.img2{ width:110px;height:90px; background:url(http://ninja.o4games.com/images/pic_3.jpg) no-repeat;border-radius:14px;border:1px solid #6f1e00;transition:0.2s;cursor:pointer;}
.img3{ width:110px;height:90px; background:url(http://ninja.o4games.com/images/pic_4.jpg) no-repeat;border-radius:14px;border:1px solid #6f1e00;transition:0.2s;cursor:pointer;}
.img1:hover{ border:1px solid #ffae00;transition:0.2s;}
.img2:hover{border:1px solid #ffae00;transition:0.2s;}
.img3:hover{border:1px solid #ffae00;transition:0.2s;}
.nr_bg .center .right .big_news .news_nr .nr2 .box .msg1:hover .img1{border:1px solid #ffae00;transition:0.2s;}
.nr_bg .center .right .big_news .news_nr .nr2 .box .msg1:hover .img2{border:1px solid #ffae00;transition:0.2s;}
.nr_bg .center .right .big_news .news_nr .nr2 .box .msg1:hover .img3{border:1px solid #ffae00;transition:0.2s;}


</style>

js部分：

<script language="javascript">

function getByClass(sClass) {//這個方法是通過一個類名稱
        var aResult = [];
        var aEle = document.getElementsByTagName('*');//JavaScript通過class獲取元素
 for (var i = 0; i < aEle.length; i++) {
            /*當className相等時添加到數組中*/
            if (aEle[i].className == sClass) {
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    };

    window.onload = function () {
        var aBox = getByClass("msg1"); //獲取到總行數目，傳入msg1獲取他和他同級的同名div,因爲Repeater的 <ItemTemplate>自動循環，所有有多少行數據就有多少個msg1


        for (var i = 1; i <= aBox.length; i++) {//循環行數
            if (9 * (i - 1) >= 9 * (i - 1) && 9 * (i - 1) <= 2 + (9 * (i - 1))) {//這是一個算法，1到3爲一張圖片，4到6又是一張圖片7到9爲第三張圖片，這位第一組。第二組循環第一組
                for (var j = 0; j <= 2; j++) {//1到3爲一組圖片j爲下標
                    $("#ContentPlaceHolder1_rAllnews_img_" + (j+(i-1)*9)).addClass("img1");通過動態添加div樣式來添加圖片
                }
                }
            if (3 + (i - 1) * 9 >=3 + (i - 1) * 9 && 3 + (i - 1) * 9 <= 5 + (i - 1) * 9) {
                for (var j = 3; j <= 5; j++) {
                    $("#ContentPlaceHolder1_rAllnews_img_"+(j+(i-1)*9)).addClass("img2");
                }
            }
            if (6 + (i - 1) * 9 >= 6 + (i - 1) * 9 && 6 + (i - 1) * 9 <= 8 + (i - 1) * 9) {
                for (var  j= 6;j<=8; j++) {
                    $("#ContentPlaceHolder1_rAllnews_img_" + (j +(i-1) * 9)).addClass("img3");
                }
            
            }
        
            //alert(aBox[i].innerHTML);
        }
    };

</script>

以下圖片爲實例部分