遍历ul下的li，点击弹出li的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id='ul'>
        <li>点我啊</li>
        <li>点我啊</li>
        <li>点我啊</li>
        <li>点我啊</li>
        <li>点我啊</li>
    </ul>
</body>
<script>
    // 第一种
    var ul = document.getElementById('ul')
    ul.addEventListener('click',function(e) {
        var lis = ul.getElementsByTagName('li')
        for (let i = 0; i < lis.length; i++ ) {
            if (e.target == lis[i]) {
                alert(i+1)
            }
        }
    })

    // 第二种
    // var lis = document.getElementsByTagName('li')
    // for (var i = 0; i < lis.length; i++) {
    //     lis[i].onclick = function (i) {
    //         return function() {
    //             alert(i+1)
    //         }
    //     }(i)
    // }

    // 第三种
    // var lis = document.getElementsByTagName('li')
    // for (var i = 0; i < lis.length; i++) {
    //     (function (i) {
    //         lis[i].onclick = function () {
    //             alert(i+1)
    //         }
    //     })(i)
    // }

    // 第四种
    // var lis = document.getElementsByTagName('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].onclick = function () {
    //         alert(i+1)
    //     }
    // }

    // 第五种
    // var lis = document.getElementsByTagName('li')
    // var liArr = [].slice.call(lis)
    // liArr.forEach((item,index) => {
    //     item.onclick = function() {
    //         alert(index+1)
    //     }
    // });

    // 第六种
    // var lis = document.getElementsByTagName('li')
    // function show(i) {
    //     this.onclick = function() {
    //         alert(i+1)
    //     }
    // }
    // for (var i = 0; i < lis.length; i++) {
    //     show.call(lis[i],i)
    // }

    // 第七种
    // var lis = document.getElementsByTagName('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].index = i
    //     lis[i].onclick = function () {
    //         alert(this.index+1)
    //     }
    // }

    //第八种
    // var lis = document.getElementsByTagName('li')
    // for (let i = 0; i < lis.length; i++) {
    //     lis[i].setAttribute('data-index',i+1)
    //     lis[i].onclick = function (e) {
    //         alert(e.target.dataset.index)
    //     }
    // }

    // 第九种
    // var ul = document.getElementById('ul')
    // var lis = ul.getElementsByTagName('li')
    // lis = [].slice.call(lis)
    // ul.addEventListener('click',function(e) {
    //     alert(lis.indexOf(e.target)+1)
    // })
</script> 
</html>

相关阅读:
基于erlang的mud游戏引擎开发
 生成数据库所有表的查询语句
 查找表字段语句
 基础算法总结 Java 版
 ArrayList源码学习
 云服务器安装 Mysql 5.7
n个元素进栈，共有多少种出栈顺序？
MyBatis 学习
 Spring学习笔记之AOP
原来你是这样的 IntegerCache
原文地址：https://www.cnblogs.com/fazero/p/11220026.html