for迴圈遍歷二維陣列 巢狀元素

2022-05-23 11:12:07 字數 1576 閱讀 5091

關於for迴圈這是js中的重點,特別是專案中會經常用到,並且它的運用範圍還極其的廣泛,極其的複雜,今天就來遍歷乙個多層巢狀的元素,先來看看簡單的布局:

1

<

ul id

="list"

>

2<

li>

3<

h2>我的好友

h2>

4<

ul>

5<

li>張安

li>

6<

li>李三

li>

7<

li>張四

li>8ul

>9li

>

10<

li>

11<

div>no

div>

12<

div>no

div>

13li

>

14<

li>

15<

div>no

div>

16li

>

17<

li>

18<

h2>不認識的人

h2>

19<

ul>

20<

li>王五

li>

21<

li>劉四

li>

22<

li>趙三

li>

23ul

>

24li

>

25<

li>

26<

h2>黑名單

h2>

27<

ul>

28<

li>劉八

li>

29<

li>李八

li>

30<

li>週六

li>

31ul

>

32li

>

33ul

>

這種布局就是ul裡有li然後li裡又巢狀著ul,並且不是單一的有規律的巢狀裡面還穿插有h2,頁面布局所顯示的效果如下圖所示:

其實我想要的實現的效果是遍歷每個分組裡的人名,那麼也就相當於是遍歷最外面的ul裡巢狀的的ul裡的li,那麼js就主要分為最關鍵的兩步:

第一,先找到最外面的ul裡的三個分組裡的ul,然後依次遍歷;

第二,就是要在遍歷過的ul裡找到其中的li然後也進行一次遍歷並新增樣式。

所以,這就是相當於二維陣列,好的,來看**:

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

這種布局在以後的專案中會經常運用到,而這個時候用for迴圈來遍歷就會方便很多,今天的例子是乙個比較簡單的案例,只要裡面的邏輯搞清楚了也就很簡單了,希望對大家有用!

好了,今天就這樣了,明天繼續!加油!

遍歷二維陣列

二維陣列的初始化和如何用foreach輸出,需要注意的是,tdarray.length是二維陣列的個數,tdarray.length i 是第i 1的陣列的長度 public static void main string args for int i 0 i 獲取二維陣列中的最大值max int ...

二維陣列元素遍歷與陣列元素累加和

學習完了陣列元素的訪問,學習下陣列的遍歷及陣列的元素累加和操作。class arraydemo09 int sum 0 for int i 0 i sum arr i system.out.println sum sum system.out.println 二維陣列的求累加和並遍歷 int arr...

二維陣列及二維陣列的遍歷

一 如果陣列的元素是一維陣列 則該陣列是二維陣列 如果陣列的元素是二維陣列 則該陣列是三維陣列 注意 二維陣列的長度 是陣列內一維陣列的個數 獲取二維陣列內的元素 第一步獲取該元素在哪乙個一維陣列內 第二步獲取該元素在一維陣列的那個位置 false var arr 1,2,3 var arr1 你好...