利用js輸出ul下li的index索引值
阿新 • • 發佈：2017-09-02
{} 事件委托 eve rip 實現 lis dataset nodelist arr
<!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索引值