前端攻城狮学习笔记四：点击ul下的li时alert其index值(闭包的应用)

题目要求

　　这是淘宝前端开发面试JavaScript部分一道题。

　　下面这个ul，如何点击每一列的时候alert其index?：

<ul id=”test”>
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

题目分析

　　两种方案，一是给每个li加一个自定义属性，然后在点击事件中alert出就行，二是利用闭包。这两种方法各有利弊，前者简单，但增加了自定义属性，改变了页面HTML代码，后者代码简洁但增加了内存消耗。代码如下：

function $(id) {
    return document.getElementById(id);
}

//方法一
var lis = $("test").children;
for (var i = 0, l = lis.length; i < l; i++) {
    lis[i].setAttribute("index", i);
    lis[i].onclick = function() {
        alert(this.getAttribute("index"));
    }
}

//方法二
var lis_lis = $("test").getElementsByTagName("li");
for (var i = 0, l = lis_lis.length; i < l; i++) {
    lis_lis[i].onclick = (function(x) {
        return function() {
            alert(x);
        }
    })(i);
}

效果验证

• 这是第一条
• 这是第二条
• 这是第三条

小结

　　题目内容虽少，但考察了闭包等JS基本功，可称得上短小精悍。