js遍历多维数组拼接到HTML,原生js for循环遍历二维数组、嵌套元素的简单示例

关于for循环这是js中的重点，特别是项目中会经常用到，并且它的运用范围还极其的广泛，极其的复杂，今天就来遍历一个多层嵌套的元素，先来看看简单的布局：

• 我的好友

  • 张安
  • 李三
  • 张四
• no
  no
• no

• 不认识的人

  • 王五
  • 刘四
  • 赵三

• 黑名单

  • 刘八
  • 李八
  • 周六

这种布局就是ul里有li然后li里又嵌套着ul，并且不是单一的有规律的嵌套里面还穿插有h2，页面布局所显示的效果如下图所示：

其实我想要的实现的效果是遍历每个分组里的人名，那么也就相当于是遍历最外面的ul里嵌套的的ul里的li，那么js就主要分为最关键的两步：

第一，先找到最外面的ul里的三个分组里的ul，然后依次遍历；

第二，就是要在遍历过的ul里找到其中的li然后也进行一次遍历并添加样式。

所以，这就是相当于二维数组，好的，来看代码：

JS代码如下：

/**

* for循环遍历二维数组、嵌套元素

*

* @param

* @arrange (编程之家) jb51.cc

**/

window.οnlοad= function(){

var Ul=document.getElementById("list");             //先找到最外面的ul

var aUl=Ul.getElementsByTagName("ul");              //第二步要获取ul里面嵌套的多个ul

var aLi=null;                                       //第四步,要在全局变量里给定义一个空的后面遍历它要用到

for(var i=0;i

aLi = aUl[i].getElementsByTagName("li");       //第四步找到遍历的每个ul里的li，并给申请确定变量

for(var j=0;j

aLi[j].style.backgroundColor="#ff0";     //最后给找到的li添加样式即可

}

}

};

// 来自：编程之家 jb51.cc(jb51.cc)最后遍历的结果便是下图所示：

这种布局在以后的项目中会经常运用到，而这个时候用for循环来遍历就会方便很多，今天的例子是一个比较简单的案例，只要里面的逻辑搞清楚了也就很简单了，希望对大家有用！

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！