獲取當前li是第幾個的程式碼例項

antzone發表於2017-03-22

li元素大家應該不會陌生，通常用來設計列表，有時候需要獲得當前li元素在元素集合中的位置，下面就通過程式碼例項介紹一下如何實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>

以上程式碼點選li元素可以將當前元素的索引值寫入span元素，下面簡單介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.var obox=document.getElementById("box")，獲取id屬性值為box的元素物件。

3.var oshow=document.getElementById("show")，獲取id屬性值為show的元素物件。

4.var lis=obox.getElementsByTagName("li")，獲取li元素物件集合。

5.for(var index=0;index<lis.length;index++){}，使用for迴圈遍歷li元素，併為其註冊事件處理函式。

6.lis[index].theIndex=index，將當前li元素物件的索引值賦值給當前li元素物件的自定義theIndex屬性。

7.lis[index].onclick=function(){oshow.innerHTML=this.theIndex}，註冊事件處理函式，此事件處理函式可以將當前li元素的索引值寫入span元素中。

二.相關閱讀:

1.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。

2.onclick事件可以參閱javascript click 事件一章節。

3.innerHTML屬性可以參閱js innerHTML一章節。

相關文章