单击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);
}

演示

原文链接:单击li,输出当前li在列表的序号 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/list-li-no.html)

发表评论

请登录后发表评论:

1 Responses to “单击li,输出当前li在列表的序号”

  1. 链接通知 : JavaScript闭包闭包闭包 – 纯洁blog