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

 

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