关于for循环这是js中的重点,特别是项目中会经常用到,并且它的运用范围还极其的广泛,极其的复杂,今天就来遍历一个多层嵌套的元素,先来看看简单的布局:
我的好友
- 张安
- 李三
- 张四
-
nono
-
no
不认识的人
- 王五
- 刘四
- 赵三
黑名单
- 刘八
- 李八
- 周六
其实我想要的实现的效果是遍历每个分组里的人名,那么也就相当于是遍历最外面的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
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!