方法一：绑定数据在dom元素上。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
windowonload=function() {
var lis = documentquerySelectorAll('ul li');
for (var i = 0; i < lislength; 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>
windowonload = function ()
{
var lis = documentquerySelectorAll ('ul li');
var anonymous = function (i)
{
lis[i]onclick = function ()
{
alert (i + 1);
};
};
for ( var i = 0; i < lislength; 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
410 20 (181) [1] 11 17
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script>
windowonload = function ()
{
"use strict";
var lis = documentquerySelectorAll ('ul li');
for ( var i = 0; i < lislength; 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>
是这样的吗？用了一个HTML5的选择器--nth-child（用法的话建议你自己去查下，我说的不是很准确），具体代码如下：
<!DOCTYPE html>
<html lang="en" xmlns=">
<li class="pro_off">
<div class="offers_money"><span>20</span>元</div>
<div class="offers_moneys">满200可用</div>
<div id="offers_id" style="display: none;">12</div>
</li>
<li class="pro_off">
<div class="offers_money"><span>20</span>元</div>
<div class="offers_moneys">满200可用</div>
<div id="Div1" style="display: none;">15</div>
</li>
<li class="pro_off">
<div class="offers_money"><span>20</span>元</div>
<div class="offers_moneys">满200可用</div>
<div id="Div2" style="display: none;">17</div>
</li>
</ul>
</body>
</html>
<script src="TravelCompany/js/jquery-183js"></script>
<script>
//单击第三个li,显示第三个li的17所在的div
$(function () {
//第三个li的点击事件
$("li:nth-child(3)")click(function () {
//显示li后面第三个div
$("#Div2")show();
});
});
</script>
<!DOCTYPE html>
<head>
<style type="text/css">
ul{
list-style:none; / 去掉ul前面的符号 /
margin: 0px; / 与外界元素的距离为0 /
padding: 0px; / 与内部元素的距离为0 /
width: auto; / 宽度根据元素内容调整 /
}
/ 所有class为menu的div中的ul中的li样式 /
ul li{float:left; / 向左漂移，将竖排变为横排 /}
#ulImages li{display:none};
</style>
<script>
function show(id){
var images = documentgetElementById("ulImages")getElementsByTagName("li");
for(var i=0;i<imageslength;i++){
images[i]styledisplay = "none";
}
images[id]styledisplay = "block";
}
</script>
</head>
<body>
<div id="t_c_ggao">
<ul id="ulImages">
<li style="display:block"><img src="images/list-1jpg" width="480" height="200"/>1</li>
<li><img src="images/list-1jpg" width="480" height="200" />2</li>
<li><img src="images/lp570jpg" width="480" height="200"/>3</li>
<li><img src="images/qx570jpg" width="480" height="200" />4</li>
<li><img src="images/ys570jpg" width="480" height="200"/>5</li>
<li><img src="images/zx570jpg" width="480" height="200" />6</li>
<li><img src="images/list-1jpg" width="480" height="200" />7</li>
</ul>
<ul id="list_number">
<li><a href="#" onclick="show(0)">1</a></li>
<li><a href="#" onclick="show(1)">2</a></li>
<li><a href="#" onclick="show(2)">3</a></li>
<li><a href="#" onclick="show(3)">4</a></li>
<li><a href="#" onclick="show(4)">5</a></li>
<li><a href="#" onclick="show(5)">6</a></li>
<li><a href="#" onclick="show(6)">7</a></li>
</ul>
</div>
</body>
嗯貌似我回答晚了，仅供参考吧，欢迎交流学习qQgroup21/77/712
1楼正解 我替楼主试过了
<html><head><title></title></head>
<body onload="ons()">
<ul id="parent">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
<script>
function ons(){
var ul = documentgetElementById('parent');
var lis = ulgetElementsByTagName('li');
for(var i=0;i<lislength;i++){
lis[i]onclick = function(){
alert(thisinnerHTML);
}
}
}
</script>
</html>
在li的点击事件中加入参数this，以便于获取到当前点击的id
1、定义一个li节点和onclick事件
<li onclick='liclick(this)' id='test'></li> onclick事件绑定liclick函数，传入参数this,这里的this指li本身2、定义onclick的js函数
function liclick(self){//这里self接收节点中定义的thisalert(selfid);//获取当前点击的li的id，这里会d出id的值是test
}
以上就是关于javascript 怎么获取 li里面点击的元素索引呢全部的内容，包括:javascript 怎么获取 li里面点击的元素索引呢、获取当前点击的 li 下的div里面的内容、js怎样获取点击的是第几个li等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）