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

關於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循環來遍歷就會方便不少，今天的例子是一個比較簡單的案例，只要裏面的邏輯搞清楚了也就很簡單了，但願對你們有用！

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