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

 

故整理以上方案，歡迎交流學習。