javascript - 点击ul下面的li，弹出当前li的index；

方式有好几种，如下；

1使用闭包；

var ul = document.getElementsByTagName("ul")[0];  
var list = ul.getElementsByTagName("li");  

function foo(){  
    for(var i = 0, len = list.length; i < len; i++){  
        var that = list[i];  
        list[i].onclick = (function(k){  
            var info = that.innerHTML;  
            return function(){  
                alert(k + "----" + info);  
            };  
        })(i);  
    }  
}  

foo();  

View Code

2使用事件代理；

var ul = document.querySelector('ul');  
var list = document.querySelectorAll('ul li');  
  
ul.addEventListener('click', function(ev){  
    var ev = ev || window.event;  
    var target = ev.target || ev.srcElemnt;  
  
    for(var i = 0, len = list.length; i < len; i++){  
        if(list[i] == target){  
            alert(i + "----" + target.innerHTML);  
        }  
    }  
});  

View Code

3引入jQuery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性)；

// delegate方法
$("ul").delegate("li", "click", function(){  
    var index = $(this).index();  
    var info = $(this).html();  
    alert(index + "----" + info);  
});  
 // on方法
$("ul").on("click", "li", function(){  
    var index = $(this).index();  
    var info = $(this).html();  
    alert(index + "----" + info);  
});  

View Code

4使用ES6中的新特性let来声明变量；

var ul = document.getElementsByTagName("ul")[0];  
var list = ul.getElementsByTagName("li");  
  
function foo(){'use strict'  
    for(let i = 0, len = list.length; i < len; i++){  
        list[i].onclick = function(){  
            alert(i + "----" + this.innerHTML);  
        }  
    }  
}  
foo();  

View Code

需要注意的是，用let来声明的变量将具有块级作用域（可以理解{}作为块级作用域的切割符号），很明显可以达到要求，不过需要注意的是得加个'use strict'（使用严格模式）才会生效。

使用jquery，可以用$(this).index()来取到li的index；

原文：https://segmentfault.com/q/1010000008557139?_ea=1680527