利用js輸出ul下li的index索引值

來源:互聯網
上載者:User

標籤:點擊   data   java   log   div   har   cti   結果   ext   

<!DOCTYPE html><html><head> <meta charset="UTF-8">    <title>列印索引</title></head><style type="text/css">li{background: pink;margin-bottom: 10px;height: 40px;}</style><body>                <ul>    <li>click</li>    <li>click</li>    <li>click</li>    <li>click</li>    <li>click</li></ul></body><script>            var nodeList = document.getElementsByTagName(‘li‘);    for (var i = 0; i < nodeList.length; i++) {       nodeList[i].addEventListener("click", function(e) {            console.log(i)        }, false);    }        </script></html> 

  上面代碼會和我們預期的結果不應,每次點擊輸出的都是最後一個元素的索引。
  function(e){}的匿名函數,在執行時,每一個都會建立一個新的範圍。這些匿名函數不會立即執行,僅僅是被定義,只有在點擊時才執行,被當做參數傳入addEventListener函數。所以在執行時i的值已經變為最後一個索引值。

  要解決這個問題,我們可以用以下幾種方案:

方案1----使用閉包;

<script>    var nodeList = document.getElementsByTagName(‘li‘);       for (var i = 0; i < nodeList.length; i++) {        (function(j){            nodeList[j].addEventListener("click", function(e) {               console.log(j);            }, false);        })(i) ;    }</script>

方案2-----使用es6中let的塊級範圍;

<script>    var nodeList = document.getElementsByTagName(‘li‘);    for (let i = 0; i < nodeList.length; i++) {       nodeList[i].addEventListener("click", function(e) {            console.log(i)        }, false);    }</script>

方案3----利用事件委託機制;

  如果li較少的話,利用上面方式實現是可以的,但是如果li的數量過多,為每個li添加事件偵聽就會對頁面效能產生很大的影響,我們可以採用委託實現。 利用Array.prototype.slice.call(nodeList)的作用是將具有length屬性的元素轉為數組,這樣可利用indexOf方法擷取li的索引值。

<script>    var nodeList = document.getElementsByTagName(‘li‘);    arrNodes = Array.prototype.slice.call(nodeList);    nodeUls = document.getElementsByTagName(‘ul‘);    nodeUls[0].addEventListener("click",function(event){        var event = event || window.event;        var target = event.target || event.srcElement;        console.log(arrNodes.indexOf(target))    },false);</script>

方案4-----使用虛擬屬性;

<script>    var nodeList = document.getElementsByTagName(‘li‘);    for(var i=0; i< nodeList.length; i++){        nodeList[i].index = i;        nodeList[i].addEventListener("click",function(e){            console.log(this.index)        },false)    }</script>

方案5----利用自訂屬性;

  ul>li結構中給li標籤加上自訂屬性

<ul>    <li data-index="0">click</li>    <li data-index="1">click</li>    <li data-index="2">click</li>    <li data-index="3">click</li>    <li data-index="4">click</li></ul>

  然後js代碼如下

<script>    var nodeList = document.getElementsByTagName("li");    for(var i=0; i<nodeList.length ; i++){        nodeList[i].addEventListener("click",function(e){            console.log(e.target.dataset.index);//自訂屬性用data-index格式的,可以使用dataset擷取;           console.log(this.getAttribute("data-index"));        },false)    }</script>

  

 

利用js輸出ul下li的index索引值

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.