關於for循環這是js中的重點，特別是項目中會經常用到，並且它的運用範圍還極其的廣泛，極其的復雜，今天就來遍歷一個多層嵌套的元素，先來看看簡單的布局：

 1 <ul id="list">
 2     <li>
 3         <h2>我的好友</h2>
 4         <ul>
 5             <li>張安</li>
 6             <li>李三</li>
 7             <li>張四</li>
 8         </
 
ul>
 9     </li>
10     <li>
11         <div>no</div>
12         <div>no</div>
13     </li>
14     <li>
15         <div>no</div>
16     </li>
17     <li>
18         <h2>不認識的人</h2>
19         <ul>
20             <li
 
>王五</li>
21             <li>劉四</li>
22             <li>趙三</li>
23         </ul>
24     </li>
25     <li>
26         <h2>黑名單</h2>
27         <ul>
28             <li>劉八</li>
29             <li>李八</li>
30             <
 
li>周六</li>
31         </ul>
32     </li>
33 </ul>

這種布局就是ul裏有li然後li裏又嵌套著ul，並且不是單一的有規律的嵌套裏面還穿插有h2，頁面布局所顯示的效果如下圖所示：

其實我想要的實現的效果是遍歷每個分組裏的人名，那麽也就相當於是遍歷最外面的ul裏嵌套的的ul裏的li，那麽js就主要分為最關鍵的兩步：

第一，先找到最外面的ul裏的三個分組裏的ul，然後依次遍歷；

第二，就是要在遍歷過的ul裏找到其中的li然後也進行一次遍歷並添加樣式。

所以，這就是相當於二維數組，好的，來看代碼：

 1 <script>
 2     window.onload= function(){
 3      var Ul=document.getElementById("list");             //先找到最外面的ul
 4      var aUl=Ul.getElementsByTagName("ul");              //第二步要獲取ul裏面嵌套的多個ul
 5      var aLi=null;                                       //第四步,要在全局變量裏給定義一個空的後面遍歷它要用到
 6         for(var i=0;i<aUl.length;i++){                   //第三步添加條件，然後遍歷嵌套裏的每個ul
 7           aLi = aUl[i].getElementsByTagName("li");       //第四步找到遍歷的每個ul裏的li，並給申請確定變量
 8             for(var j=0;j<aLi.length;j++){               //第五步添加條件來遍歷找到的每個嵌套在ul裏的li
 9                 aLi[j].style.backgroundColor="#ff0";     //最後給找到的li添加樣式即可
10             }
11         }
12 
13     };
14 </script>

最後遍歷的結果便是下圖所示：

這種布局在以後的項目中會經常運用到，而這個時候用for循環來遍歷就會方便很多，今天的例子是一個比較簡單的案例，只要裏面的邏輯搞清楚了也就很簡單了，希望對大家有用！

好了，今天就這樣了，明天繼續！加油！

for循環遍歷二維數組、嵌套元素