点击li列表返回列表下标

主要就是有一个已知li列表,当用户点击某一个li时,返回其所在li中的位置

思路:

代码如下:

<html>
    <head></head>
    <body>
        <ul id="list">
            <li>标签1</li>
            <li>标签2</li>
            <li>标签3</li>
            <li>标签4</li>
            <li>标签5</li>
        </ul>

    </body>
</html>

<script>
// 方法一
var oli=document.getElementsByTagName('li');  
for(var i=0; i<oli.length;i++)  
  {       
      oli[i].index=i+1;      
      oli[i].onclick=function(){     
      alert('你点击的列表的下标是:'+this.index);
        //列表下标从0开始     
                };      
     }  
// 方法二 事件托管,由父节点监听点击事件
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;
}
}
}
</script>