单击li，输出当前li在列表的序号

HTML结构为一个无序列表，点击li输出每个在ul中的序号。代码如下：

<ul id="list">
<li>序号1</li>
<li>序号2</li>
<li>序号3</li>
<li>序号4</li>
<li>序号5</li>
<li>序号6</li>
<li>序号7</li>
<li>序号8</li>
<li>序号9</li>
<li>序号10</li>
</ul>

第一种：使用事件委托

var ul = document.getElementById('list');
var li = ul.getElementsByTagName('li');

ul.onclick = function(e){
var e = e || window.event, target = e.target || e.srcElement;
for(var s in li){
if(target == li[s]){
s = parseInt(s)+1;
alert(s);
break;
}
}
}

第二种：闭包

function msg(index){
li[index].onclick = function(){
alert(index);
}
}
for (var i = 0; i< li.length; i++){
msg(i);
}
msg = null;

第三种：jquery的index()

li.on("click",function(){
var index = $(this).index();
alert(index);
}

演示