js如何给ul的所有的li绑定事件，打印他们的索引 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         
 7         <style type="text/css">
 8             
 9             ul{
10                 list-style: none;
11             }
12             li{
13                 /* width: 100px; */
14                 height: 40px;
15                 background-color: red;
16                 margin: 10px auto;
17             }
18         </style>
19     </head>
20     <body>
21         
22         <ul>
23             <li>第一个li</li>
24             <li>第二个li</li>
25             <li>第三个li</li>
26         </ul>
27         
28         <script type="text/javascript">
29             
30             // js如何给ul的所有的li绑定事件， 假设有三个li
31             
32             var itemli = document.getElementsByTagName("li"); //是个伪数组
33             
34                 for(var i=0; i<itemli.length; i++){ //事件绑定为异步操作，for循环已经结束了，i为3
35                 
36                     itemli[i].onclick=function(){
37                         console.log(i)  //i为3
38                     }
39                     
40                 }
41                 
42             //方法一;
43             var itemli = document.getElementsByTagName("li");
44             for(var i=0; i<itemli.length; i++){
45                 itemli[i].index=i;   //给每个li定义一个index属性
46                 itemli[i].onclick=function(){
47                     console.log(this.index+ this.innerHTML)
48                 }
49                 
50             }
51             
52             // 方法二;
53             var itemli = document.getElementsByTagName("li");
54             
55             for(var i=0; i<itemli.length; i++){
56                 (function(n){   //利用闭包，
57                     
58                     itemli[n].onclick=function(){
59                         console.log(this.innerHTML+",索引是"+ n)
60                     }
61                     
62                 })(i)
63             }
64             
65             // jq方法
66             var $itemli = $("li");
67             $itemli.click(function(){  //隐士遍历
68                 console.log(this.innerHTML+ this.index())
69             })
70             
71             
72             
73             
74         </script>
75     </body>
76 </html>

 

posted @ 2020-05-29 16:17  全情海洋  阅读(456)  评论(0)    收藏  举报