javascript 怎么获取 li里面点击的元素索引呢?
发布网友
发布时间：2022-04-29 16:00
我来回答
共5个回答
热心网友
时间：2022-05-14 14:43
方法一：绑定数据在dom元素上。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
window.onload=function() {
var lis = document.querySelectorAll('ul li');
for (var i = 0; i < lis.length; i++) {
lis[i]._index = i;
lis[i].onclick = function() {
alert(this._index + 1);
};
}
};
</script>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
方法二：闭包
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
window.onload = function ()
{
var lis = document.querySelectorAll ('ul li');
var anonymous = function (i)
{
lis[i].onclick = function ()
{
alert (i + 1);
};
};
for ( var i = 0; i < lis.length; i++)
{
anonymous (i);
}
};
</script>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
方法三：使用 let 关键字 声明
浏览器及最低版本支持
Chrome Firefox (Gecko) Internet Explorer Opera
41.0 2.0 (1.8.1) [1] 11 17
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
window.onload = function ()
{
"use strict";
var lis = document.querySelectorAll ('ul li');
for ( var i = 0; i < lis.length; i++)
{
let j = i;
lis[i].onclick = function ()
{
alert (j + 1);
};
}
};
</script>
</head>
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
热心网友
时间：2022-05-14 16:01
用JS遍历就可以做，代码如下：
<ul id="test">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</ul>
<script>
window.onload=function(){
var ul=document.getElementById('test');
var ul_lis=ul.getElementsByTagName('li');
for (var i = 0;i < ul_lis.length; i++) {
ul_lis[i].index = i;
ul_lis[i].onclick=function(){
var j=this.index+1;
alert(j);
}
}
};
</script>
如果想简单的放用Jquery很方便就可以获取。
<ul id="test">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</ul>
<script>
$("#test li").click(function(){
var index = $(this).index()+1;
alert(index);
return false;
});
</script>
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
热心网友
时间：2022-05-14 17:36
jquery一句话就OK了。
$("ul li").click(function(){
alert($(this).index());
});
如果用纯JS写下面这位兄弟的代码是个不错办法。
热心网友
时间：2022-05-14 19:27
方法一：为li添加自定义属性 值设为1,2,3，点击对象取属性值。
方法二：页面载入时，遍历li，为每一个li dom对象添加属性，属性值设为1 2 3 ，点击对象获取属性值。
方法三：点击事件里面遍历li，和点击对象比较
热心网友
时间：2022-05-14 21:35
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick=function(i){
return function(){
console.log(i);
}
}(i)
}
使用闭包方法遍历找索引值
