四种方法js实现点击<li>弹出索引

最新推荐文章于 2023-10-26 14:03:34 发布

原创最新推荐文章于 2023-10-26 14:03:34 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #索引 #标签 #li

技术分享专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用原生JavaScript及jQuery获取HTML中相同类型元素的索引值，提供了多种实现方式，并通过实例代码展示了每种方法的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写小项目的时候有用到ul里li元素的index索引值，看想了下可以原生和用jq都可实现取到其索引值。

不仅仅是li,多个相同的标签如img都可以，比如下面的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="img/img/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<img src="img/img/1.png"/>
<img src="img/img/2.png"/>

<script type="text/javascript">
var img = document.getElementsByTagName('img');
for (var i = 0; i < img.length; i++) {
//方法1
// img[i].onclick=(function(n){
// return function(){
// alert(n)
// }
// })(i);

//方法2
(function(n){
img[i].onclick=function(){
alert(n)
}
})(i)