您的位置：首页 > Web前端 > JavaScript

js获取li的索引值

2015-11-02 10:22 525 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js获取当前选中的li的索引以及中文本值</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{margin: 0;padding: 0;}
ul li {list-style-type: none;}
.ulall {width: 300px;margin: 0 auto;}
.ulall li{width: 300px;height: 35px}

</style>
</head>
<body>
<ul id="ulall">
<li name="chek">java</li>
<li name="chek">css</li>
<li name="chek">javascript</li>
<li name="chek">jquery</li>
<li name="chek">html5</li>
</ul>
<pre name="code" class="html"><pre name="code" class="html"><h1>使用闭包实现</h1>
<div class="all" id="conAll">        <ul>            <li>html</li>            <li>css</li>            <li>javascript</li>            <li>jquery</li>        </ul>    </div>
 <script> var ultarget=document.getElementById("ulall"); var lis=ultarget.getElementsByTagName("li"); for(var i=0,length=lis.length;i<length;i++){ lis[i].onclick=function(){ var liIndex=index(this,lis); alert("当前li的索引值是："+liIndex); } } function index(current,obj){for (var i = 0,length=obj.length; i < length; i++) {if (obj[i] == current) {return i;}}}/*使用闭包实现*/
<pre name="code" class="html"> function requireIndex(){var targetCon=document.getElementById("conAll");var items=targetCon.getElementsByTagName("li");for(var i=0,length=items.length;i<length;i++){var that=items[i];that.onclick=(function(k){var info=that.innerHTML;return function(){alert(k+"---"+info);}})(i);}}requireIndex();
 </script></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航