上篇博客是每個li里只有僅僅一個div去更改其顏色，但是若是我們遇到每個li里有多個及不同數量的div，而每個div要匹配數組里的顏色，並且依次遞增循環，那么就要用到for循環以及清楚了解this指向當前元素是哪一個然后再給其匹配數組中的顏色。這些話有點繞口，那我們來看代碼，先來看看布局：
1 <style> 2 ul,li{list-style: none;} 3 ul{overflow: hidden;} 4 li{width:200px;height:auto;margin:100px 15px;float:left;text-align: center;} 5 li div{width:200px;height:200px;border:1px solid #f5f5f5;cursor: pointer;} 6 </style> 7 <body> 8 <ul id="list"> 9 <li> 10 <div></div> 11 <div></div> 12 </li> 13 <li> 14 <div></div> 15 <div></div> 16 </li> 17 <li> 18 <div></div> 19 <div></div> 20 <div></div> 21 </li> 22 </ul> 23 </body>
以上li里的div並不相等，每個div都要循環到，並且個附上色值，思路分析：
1.先要找到ul，並循環ul里的li；
2.再次獲取到每個li里的div，然后依次循環div；
3.給每個div添加點擊事件，並且給循環匹配數組中的色值。
需注意的是：每個div相互之間不受影響，所以每次每個div初始化一定要從0開始循環數組里的色值。來看js代碼：
1 <script> 2 window.onload= function(){ 3 var List=document.getElementById("list");//先獲取到最外面的ul 4 var aLi=List.getElementsByTagName("li");//然后獲取li 5 var arr=["#f00","#ff0","#00f"]; 6 for(var i=0;i<aLi.length;i++){ 7 var oDiv=aLi[i].getElementsByTagName("div"); 8 for(var j=0;j<oDiv.length;j++){ 9 oDiv[j].num=0; //這里是對當前的div自定義了一個num=0的屬性 10 oDiv[j].onclick=function(){ 11 this.style.backgroundColor=arr[this.num];//這里當前的div的背景顏色就是數組中的第0個即為#f00 12 this.num++;//當前自定義的num屬性依次加1 13 if(this.num==arr.length){//當前自定義的num屬性值等於數組的長度的時候就不能再加了，讓其等於0，那么就從頭開始即可循環 14 this.num=0; 15 } 16 } 17 } 18 } 19 }; 20 </script>
以上便是效果圖，js中的每個步驟都已詳細標注，如有疑問歡迎評論指導。今天就到這里，明天繼續！加油！