jQuery怎么获取当前li元素顺序?判断当前li元素位置

发布时间:2020-03-01编辑:脚本学堂
本文介绍了jQuery如何获取当前li元素是第几个的方法,判断当前li元素的位置顺序,有需要的朋友参考下。

jquery怎么获取当前li元素顺序?
问题描述:
有一个li的列表,如何知道当前的li是第几个li元素:
 

复制代码 代码示例:
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
 

形如以上的li元素结构,如何知道当前操作的li是第几个?

完整代码:
 

复制代码 代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb200.com/" />
<title>脚本学堂_www.jb200.com</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>脚本学堂一</li>
  <li>脚本学堂二</li>
  <li>脚本学堂三</li>
  <li>脚本学堂四</li>
  <li>脚本学堂五</li>
  <li>脚本学堂六</li>
</ul>
</body>
</html>