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是第几个代码实例



3 4



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 js函数方法 js函数 js方法 javascript函数方法 javascript函数 javascript方法

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到