JavaScript获取当前li是第几个代码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript获取当前li是第几个代码实例

li元素大家应该不会陌生，通常用来设计列表，有时候需要获得当前li元素在元素集合中的位置，下面就通过代码实例介绍一下如何实现此功能，代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css"> 
ul{
  list-style:none;
  width:100px;
  height:25px;
  line-height:25px;
  font-size:12px;
}
</style> 
<script type="text/javascript">  
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var lis=obox.getElementsByTagName("li");
  for(var index=0;index<lis.length;index++){
    lis[index].theIndex=index;
    lis[index].onclick=function(){
      oshow.innerHTML=this.theIndex;
    }
  }
}
</script> 
</head>
<body>
<div>当前元素的顺序:<span id="show"></span></div>
<ul id="box">
  <li>51前端一</li>
  <li>51前端二</li>
  <li>51前端三</li>
  <li>51前端四</li>
  <li>51前端五</li>
  <li>51前端六</li>
</ul>
</body>
</html>

代码描述：JavaScript获取当前li是第几个。JavaScript获取当前li是第几个代码实例

下载全部收藏

146 195

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册