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

最新推荐文章于 2024-05-20 21:15:00 发布

沈志勇说

最新推荐文章于 2024-05-20 21:15:00 发布

阅读量2.8w

点赞数 8

分类专栏： javascript笔记文章标签： javascript面试题 javascript index li

本文链接：https://blog.csdn.net/u011456552/article/details/52291610

版权

javascript笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在之前面试的时候，笔记的环节总是碰到用原生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>

沈志勇说

关注

8
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
js点击获取当前li标签的index值

Document li{ background-color: red; } window.onload=function(){ var list =document.getElementsByTagName('li'); for(var i=0;i<list.length;i++){ list[i].onclick = (functio
复制链接

扫一扫