for循環遍歷二維數組、嵌套元素
阿新 • • 發佈:2017-11-22
image 變量 i++ 多層嵌套 想要 比較 list log 它的
關於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循環遍歷二維數組、嵌套元素