前端攻城狮学习笔记四：点击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基本功，可称得上短小精悍。