javascript 怎么获取 li里面点击的元素索引呢?

比如说我有个ul里面有3个li当我点击第二个时候则返回的是二。还有js怎么做ul点击导航菜单... 比如说 我有个ul 里面有3个 li 当我点击第二个时候 则返回的是二。 还有js怎么做ul点击导航菜单 展开
 我来答
jack观天下
推荐于2017-09-14 · 带你看天下趣闻,有意思的视频!
jack观天下
采纳数:832 获赞数:3143

向TA提问 私信TA
展开全部

用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一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

yugi111
2015-09-16 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
方法一:绑定数据在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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
wuxd7
推荐于2017-10-10 · TA获得超过323个赞
知道小有建树答主
回答量:452
采纳率:100%
帮助的人:282万
展开全部
方法一:为li添加自定义属性 值设为1,2,3,点击对象取属性值。
方法二:页面载入时,遍历li,为每一个li dom对象添加属性,属性值设为1 2 3 ,点击对象获取属性值。
方法三:点击事件里面遍历li,和点击对象比较
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
灵葬外与他29
2014-02-21 · TA获得超过2183个赞
知道小有建树答主
回答量:1221
采纳率:50%
帮助的人:938万
展开全部

jquery一句话就OK了。

$("ul li").click(function(){
    alert($(this).index());
});

如果用纯JS写下面这位兄弟的代码是个不错办法。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友3d29ac0
2019-03-13
知道答主
回答量:7
采纳率:0%
帮助的人:5044
展开全部
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick=function(i){
return function(){
console.log(i);
}
}(i)
}
使用闭包方法遍历找索引值
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式