JavaScript獲取當前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).document.getElementById()參閱document.getElementById()一章節。
(2).getElementsByTagName()參閱JavaScript getElementsByTagName()一章節。
(3).innerHTML參閱JavaScript innerHTML 屬性一章節。
相關文章
- 獲取當前li是第幾個的程式碼例項
- JavaScript 獲取第n個li元素JavaScript
- JavaScript獲取當前li元素的索引位置JavaScript索引
- javascript獲取li列表中的第幾個liJavaScript
- jQuery獲取當前li元素的下一個元素jQuery
- javascript獲取當前li元素在集合中的位置JavaScript
- jQuery判斷當前元素是第幾個元素jQuery
- jquery獲取指定li元素後面的第n個li元素jQuery
- 用jQuery獲取指定前幾個li元素程式碼例項jQuery
- jQuery點選的是第幾個li元素jQuery
- javascript獲取當前元素的上一級元素JavaScript
- jQuery怎麼獲取li列表中的第幾個lijQuery
- JavaScript 獲取倒數第二個li元素JavaScript
- JavaScript獲取倒數第二個li元素JavaScript
- JavaScript獲取li元素的下標JavaScript
- jQuery獲取當前元素的下一個元素jQuery
- JQuery獲取當前元素本身jQuery
- 點選事件獲取當前li的索引事件索引
- jQuery選擇器獲取前幾個元素jQuery
- JavaScript 獲取當前月份JavaScript
- JavaScript 獲取當前域名JavaScript
- javascript獲取當前urlJavaScript
- jQuery 刪除當前li元素jQuery
- 當前li元素的索引值索引
- jquery如何獲取li元素的前n個程式碼例項jQuery
- 獲取當前元素下一個元素程式碼例項
- Java獲取當前星期幾Java
- python怎麼獲取當前是幾點?Python
- C# 獲取當前是星期幾的方法C#
- Swift 3 獲取當前日期是第幾周Swift
- jQuery如何獲取當前元素的兄弟元素jQuery
- JavaScript獲取當前點選元素的id屬性值JavaScript
- javascript獲取li元素內容程式碼例項JavaScript
- jQuery如何獲取當前元素的索引jQuery索引
- jQuery獲取當前元素上一個兄弟元素例項程式碼jQuery
- 獲取倒數第幾個元素程式碼例項
- 獲取ul元素下的所有li元素
- 獲取div元素下li元素的數目