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 li{ width:150px; height:30px; line-height:30px; font-size:12px; cursor:pointer; } span{ color:red; font-size:12px; } </style> <script type="text/javascript"> window.onload=function(){ var lis=document.getElementsByTagName("li"); var theSpan=document.getElementById("theSpan"); for(var i=0;i<lis.length;i++){ lis[i].index=i; lis[i].onclick = function () { theSpan.innerHTML=this.index; } } } </script> </head> <body> <ul> <li>螞蟻部落一</li> <li>螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> <li>螞蟻部落五</li> </ul> <div>當前索引值:<span id="theSpan"></span></div> </body> </html>
當點選li元素的時候,能夠在span中實時顯示索引值,下面介紹一下實現過程:
一.實現原理:
通過for迴圈遍歷li元素物件集合中的每一個li元素,並且將li元素的自定義index屬性值設定為當前li在集合中的索引,並且為每一個li元素註冊click事件處理函式,此函式可以將當前li元素的index屬性值寫入span。
二.相關閱讀:
(1).getElementsByTagName()參閱document.getElementsByTagName()一章節。
(2).this可以參閱JavaScript this 詳解一章節。
(3).onclick事件參閱javascript click 事件一章節。
相關文章
- 獲取當前元素在兄弟元素節點中的索引索引
- JavaScript 獲取第n個li元素JavaScript
- 小程式獲取當前元素在螢幕中的位置
- JavaScript 獲取倒數第二個li元素JavaScript
- JavaScript 獲取當前月份JavaScript
- JavaScript獲取元素在陣列中的位置JavaScript陣列
- 微信小程式獲取當前位置微信小程式
- Flutter 小知識,Key的使用(獲取當前點選Widget位置/獲取當前Widget大小)Flutter
- 封裝js獲取當前元素的弟弟元素節點封裝JS
- 直播app原始碼,uniapp獲取當前位置APP原始碼
- JavaScript 陣列 指定索引位置插入元素JavaScript陣列索引
- 百度地圖JavaScript API獲取使用者當前經緯度並獲取使用者當前詳細地理位置地圖JavaScriptAPI
- 使用JS獲取當前地理位置方法彙總JS
- JavaScript獲取字串指定索引位置字元JavaScript字串索引字元
- JavaScript怎麼獲取當前時間的年月日?JavaScript
- JavaScript動態新增li元素JavaScript
- 獲取當前時間
- 最全的獲取元素寬高及位置的方法
- php 獲取當前域名和當前協議PHP協議
- JavaScript獲取父元素下子元素節點JavaScript
- jQuery將li元素插入列表中任意位置jQuery
- 獲取當前頁面的topViewControllerViewController
- Java獲取當前星期幾Java
- mybatis獲取當前時間MyBatis
- 獲取當前Tomcat例項的埠Tomcat
- 獲取當前時間往前的日期
- Spark獲取當前分割槽的partitionIdSpark
- 獲取元素大小、偏移量及滑鼠位置
- JavaScript li元素的順序隨機打亂JavaScript隨機
- JavaScript 通過class獲取元素物件JavaScript物件
- python 如何獲取當前時間Python
- JavaScript獲取滑鼠在元素中的座標JavaScript
- 用js獲取當前月份的天數JS
- js獲取當前的具體時間JS
- Python獲取list中指定元素索引的兩種方法Python索引
- 用 js 獲取頁面元素的位置圖文總結JS
- getBoundingClientRect方法獲取元素在頁面中的相對位置GCclient
- CSS 設定前n個li元素樣式CSS
- JavaScript 獲取所有後代元素節點JavaScript