首先先看代码:
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; }); });
故整理以上方案,欢迎交流学习。