整体思路:可以用for循环去遍历<ul>下的所有<li>;然后对比鼠标悬浮时对应的li元素,输出当前的i,也就是对应li的下标。
html代码部分:
新建一个ul无序列表,并赋予id值,如:
<ul class="UL" id="UL">
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
</ul>
css部分:
接下来是对无序列表做一下简单的样式,便于后期测试悬浮效果;给li设置一下宽度以及设置一下边框,如:
.UL{display:block width:100px text-align:center margin:20px auto}
.UL li{display:block line-height:30px cursor:pointer border:1px dashed red}
最后是JS代码部分:
//定义ul的悬浮函数
document.getElementById("UL").onmouseover = function(e){
var target = e.target //获取对应目标元素
var children = this.children //获取ul里面的所有li元素集合
for(i = 0i<children.lengthi++){
if(target == children[i]) { //对比目标元素和li集合元素
alert("目标元素的下标为:" + i) //输出目标元素的下标
return
}
}
}
最后用浏览器打开该html文件,鼠标悬浮到li上面的时候,就会输出对应li的下标,比如鼠标覆盖在第3个li上面,即 <li>3333333</li>上面时,效果图如下:
1、打开编辑工具editplus,点击editplus菜单栏上的【File】-->New -->HTML page。
2、新建好html页面后,editplus自动帮助我们生成了框架,先把title修改下,然后保存。
3、在body区域里添加了子,父,祖父三级div,代码如下。
4、演示代码写好后,打开浏览器,在浏览器上运行看看效果。
5、下面在head区域里添加实现js获取最高父级的代码,代码具体如下,这样利用了while循环来判断的。
6、实现好后,保存代码,此时再到浏览器上刷新访问,看下,此时弹出对话框告诉最后父级是zufu。