使用js【点击li 获取相应的index值 三种方法 全部实测 都是正确的】

<ul class="ulStyle">
                    <li><a href="#"><b>IT.互联网</b></a>&nbsp;前端开发 &nbsp; Java ></li>
                    <li><a href="#"><b>设计.创作</b></a>&nbsp;平面设计 &nbsp; UI设计 ></li>
                    <li><a href="#"><b>语言.留学</b></a>&nbsp;实用英语 &nbsp; 雅思&nbsp;托福 ></li>
                    <li><a href="#"><b>职业.考证</b></a>&nbsp;公务员 &nbsp; 教师考试 ></li>
                    <li><a href="#"><b>升学.考研</b></a>&nbsp;考研 &nbsp; 大学 &nbsp;高中></li>
                    <li><a href="#"><b>兴趣.生活</b></a>&nbsp;摄影 &nbsp; 乐器演奏&nbsp;美妆 ></li>
  </ul>

这是之前帮同学写的HTML的样式 ,然后突然想到之前老师讲的获取index值的方法  于是上网查了一下 然后总结了一下 

有如下 三种方法:

   方法一:

    var lis=document.getElementsByTagName("li");
      for (var i = 0; i < lis.length; i++) {           
                lis[i].onclick=(function(index){
                    return function(){
                        alert(index);
                    }
                })(i)
      }

方法二:

    var lis=document.getElementsByTagName("li");
      for (var i = 0; i < lis.length; i++) {           
            (function(index){
                lis[i].onclick=function(){
                    alert(index)
                }
            })(i)
      }

方法三:

   

 var oli=document.getElementsByTagName('li');  

   for(var i=0; i<oli.length;i++)  
   {     
       oli[i].index=i;  
       oli[i].onclick=function(){  
       alert('你点击的列表的下标是:'+this.index);//列表下标从0开始  
        };  
    }  

猜你喜欢

转载自blog.csdn.net/weixin_43932281/article/details/84838658