博客

js点击获取当前li标签的index值

  • Post author:
  • Post category:其他


在之前面试的时候，笔记的环节总是碰到用原生js弹出当前点击li的indx值，今天没事就写一下，留作记忆！
下面是html机构，为了省事我就不加id class了。 
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

接下来就是js部分了 
<script type="text/javascript">
	var list =document.getElementsByTagName('li');
	for(var i=0;i<list.length;i++){
		list[i].index=i;
		list[i].οnclick=function () {
			alert(this.index+1);                  //加不加1随你了！
		} 
	}
<script>




    如果

    

     你把js代码放到了头部，一定要记得加window.οnlοad=function(){}

    

    
   



    放到头部，不加这段代码的话会点击没有反应，或者直接报错：
   



    

     Uncaught TypeError: Cannot set property ‘onclick’ of null;

    
   



    后来在

    

     stackoverflow

    

    找到了原因。要是对DOM操作的话，要先加载完全。扯的有点远了啊！
   



   



    接下换一个写法：
   




var list =document.getElementsByTagName('li');
				for(var i=0;i<list.length;i++){
					list[i].onclick =	(function(n){
						return function(){
							alert(n);
						}
					})(i)
	  		}
	  	}



   



    最后附上完整代码：
   




<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li{
			background-color: red;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			
			var list =document.getElementsByTagName('li');
				for(var i=0;i<list.length;i++){
					list[i].onclick =	(function(n){
						return function(){
							alert(n);
						}
					})(i)
	  		}
	  	}
  	}
	</script>
</head>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>



   



    
   




 






版权声明：本文为u011456552原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。