• JS和jQuery中ul li遍历获取对应的下角标


    首先先看代码:

    html代码部分:

    <div id="div">
                <ul>
                    <li>1111111</li>
                    <li>2222222</li>
                    <li>3333333</li>
                    <li>4444444</li>
                    <li>5555555</li>
                    <li>6666666</li>
                </ul>
            </div>

    对应的JS的代码部分:

    var list = document.getElementsByTagName("li");
    for(var i = 0; i < list.length; i++) {
                list[i].onclick = function() {
                    console.log(i);
                }
            }

    上面当我们在ul li遍历时,点击每一个li标签,往往取不到对应的下角标,在控制台打印出来的都是最后一个的值6。

    为什么会产生这样的问题呢?

    解决方案一:

    JS方法

    var list = document.getElementsByTagName("li");
            for(var i = 0; i < list.length; i++) {
                list[i].index = i;
                list[i].onclick = function() {
                    console.log(this.index);
                }
            }
            

    解决方案二:

    jquery方法

    $(function() {
                $('#div').find('li').each(function() {
                    $(this).click(function() {
                        console.log($(this).index());
                    })
                })
    
            })

    上面记得别忘了引入jQuery框架。

    解决方案三:

    直接利用jquery中的index

    $(function() {
                $("li").on("click", function() {
                    var i = $(this).index(); //当前索引值
                    alert(i);
                })
            })

    解决方案四:

    window.onload = onclickList;
            function onclickList() {
                var list = document.getElementsByTagName("li");  
                for(var i = 0; i < list.length; i++)   {
                    list[i].onclick = (function(i) {  
                        return function() {    
                            alert("我是第" + (i + 1) + "个list");  
                        }
                    }(i))  
                }
            }

    解决方案五:

    $(function() {
                $('ul li').click(function() {
                    alert($(this).index() + 1);
                    return false;
                });
            });

    故整理以上方案,欢迎交流学习。

  • 相关阅读:
    抽奖系统 random()
    JavaScript 稀奇的js语法
    Node初识笔记 1第一周
    vue 自定义指令
    vue 组件 单选切换控制模板 v-bind-is
    学习网址
    vue 组件 子向父亲通信用自定义方法用事件监听
    vue 组件 模板中根数据绑定需要指明路径并通信父
    vue 组件 模板input双向数据数据
    测试样式
  • 原文地址:https://www.cnblogs.com/wangzhenhai/p/6484933.html
Copyright © 2020-2023  润新知