• 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;
                });
            });

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

  • 相关阅读:
    BZOJ1862: [Zjoi2006]GameZ游戏排名系统
    BZOJXXXX: [IOI2000]邮局——四边形不等式优化初探
    BZOJ1801: [Ahoi2009]chess 中国象棋
    BZOJ1505: [NOI2004]小H的小屋
    BZOJ1899: [Zjoi2004]Lunch 午餐
    BZOJ1057: [ZJOI2007]棋盘制作
    BZOJ1100: [POI2007]对称轴osi
    BZOJ1123: [POI2008]BLO
    线性规划之单纯形讲解
    BZOJ 3265 志愿者招募加强版(单纯形)
  • 原文地址:https://www.cnblogs.com/wangzhenhai/p/6484933.html
Copyright © 2020-2023  润新知