原生js for循环遍历二维数组、嵌套元素的解决办法

内容摘要
这篇文章主要为大家详细介绍了原生js for循环遍历二维数组、嵌套元素的简单示例，具有一定的参考价值，可以用来参考一下。

关于for循环这是js中的重点，特别是项目中会经常用到，
文章正文

这篇文章主要为大家详细介绍了原生js for循环遍历二维数组、嵌套元素的简单示例，具有一定的参考价值，可以用来参考一下。

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

<ul id="list">
  <li>
    <h2>我的好友</h2>
    <ul>
      <li>张安</li>
      <li>李三</li>
      <li>张四</li>
    </ul>
  </li>
  <li>
    <div>no</div>
    <div>no</div>
  </li>
  <li>
    <div>no</div>
  </li>
  <li>
    <h2>不认识的人</h2>
    <ul>
      <li>王五</li>
      <li>刘四</li>
      <li>赵三</li>
    </ul>
  </li>
  <li>
    <h2>黑名单</h2>
    <ul>
      <li>刘八</li>
      <li>李八</li>
      <li>周六</li>
    </ul>
  </li>
</ul>
这种布局就是ul里有li然后li里又嵌套着ul，并且不是单一的有规律的嵌套里面还穿插有h2，页面布局所显示的效果如下图所示：其实我想要的实现的效果是遍历每个分组里的人名，那么也就相当于是遍历最外面的ul里嵌套的的ul里的li，那么js就主要分为最关键的两步：第一，先找到最外面的ul里的三个分组里的ul，然后依次遍历；第二，就是要在遍历过的ul里找到其中的li然后也进行一次遍历并添加样式。所以，这就是相当于二维数组，好的，来看代码：JS代码如下： 

/**
 * for循环遍历二维数组、嵌套元素
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
<script>
  window.onload= function(){
  var Ul=document.getElementById("list");       //先找到最外面的ul
  var aUl=Ul.getElementsByTagName("ul");       //第二步要获取ul里面嵌套的多个ul
  var aLi=null;                    //第四步,要在全局变量里给定义一个空的后面遍历它要用到
    for(var i=0;i<aUl.length;i++){          //第三步添加条件，然后遍历嵌套里的每个ul
     aLi = aUl[i].getElementsByTagName("li");    //第四步找到遍历的每个ul里的li，并给申请确定变量
      for(var j=0;j<aLi.length;j++){        //第五步添加条件来遍历找到的每个嵌套在ul里的li
        aLi[j].style.backgroundColor="#ff0";   //最后给找到的li添加样式即可
      }
    }

  };
</script>

// 来自：php教程（www.idcnote.com）
最后遍历的结果便是下图所示：这种布局在以后的项目中会经常运用到，而这个时候用for循环来遍历就会方便很多，今天的例子是一个比较简单的案例，只要里面的逻辑搞清楚了也就很简单了，希望对大家有用！

注：关于原生js for循环遍历二维数组、嵌套元素的简单示例的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇JavaScript 无限TAB的解决办法下一篇学会python入门神图

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！