for循环遍历LI问题

<ul id="ul1">    <li>111</li>    <li>222</li>    <li>333</li>    <li>444</li></ul>

window.onload = function (){
  var ULa = document.getElementById("ul1");
  var lia = ULa.getElementsByTagName("li");
  for(var i=0;i<lia.length;i++){

     lia[i].onclick = function(){
        alert(i);//此时打印的都是4  原因是闭包的问题  解析程序首先会在事件处理程序内部查找,这个匿名函数内部没有定义变量i,然后往上级查找,此时i为4 
      };
   };}

下面做下分析:因为在for循环里面指定给lia[i].onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。

解决方法:

1、window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName(‘li‘);
    for(var i=0;i<aLi.length;i++){
      (function(e){
        aLi[i].onclick = function(){
          console.log(i);//全部打印4
        }
      })(i);
    }

}

2、从匿名包装器中返回一个函数

  window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName(‘li‘);
    for(var i=0;i<aLi.length;i++){

      aLi [i].onclick = (function(e){
              return function(){
                  alert(e + 1);
              };
           })(i);    }

  }

 
				
时间: 2024-10-12 10:24:17

for循环遍历LI问题的相关文章

如何循环遍历document.querySelectorAll()方法返回的结果

使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* Will Not Work */ document.querySelectorAll('.module').forEach(function() { }); 执行上面的代码,你将会得到执行错误的异常信息.这是因为,document.querySelectorAll()返回的不是一个数组,而是一个No

js 使用for循环遍历数组

今天写个无聊的东西!for循环的使用!如下:定义a数组,b为伪数组! var a = [1,2,3,0,5,4]; var b = document.getElementsByTagName('li'); //[<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>] 第一种:错误型! for ( var i = 0; i <

php中的循环遍历 foreach list each

foreach语句遍历数组foreach语句用于循环遍历数组,每进行一次循环,当前数组元素的值就会被赋值给变量value(也可以是其它变量),数组指针会逐一的移动. 代码示例: foreach($array as $value){  //$array要遍历的数组,$value为指针指向数组当前的值,as起到赋值的作用 code to executed;} foreach语句也可以获得数组的键名,如下:  代码示例: foreach($array as $key => $value){ echo

[转发]for 循环,jQuery循环遍历详解

1.for 循环原生JS最基本的使用: for (var i=0;i<cars.length;i++) { ..... } for - 循环代码块一定的次数2.for infor/in - 循环遍历对象的属性以任意顺序遍历一个对象的可枚举属性.对于每个不同的属性,语句都会被执行 var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[p

To Java程序员:切勿用普通for循环遍历LinkedList

ArrayList与LinkedList的普通for循环遍历 对于大部分Java程序员朋友们来说,可能平时使用得最多的List就是ArrayList,对于ArrayList的遍历,一般用如下写法: public static void main(String[] args) { List<Integer> arrayList = new ArrayList<Integer>(); for (int i = 0; i < 100; i++) arrayList.add(i);

c# winform 循环遍历界面上的所有控件,foreach,Controls,AllowDrop

foreach (System.Windows.Forms.Control control in this.groupBox2.Controls)//遍历groupBox2上的所有控件 { if (control is System.Windows.Forms.PictureBox) { System.Windows.Forms.PictureBox pb = (System.Windows.Forms.PictureBox)control; pb.AllowDrop = true; } if

JS完成页面跳转并传参的方法|附加:循环遍历对象

此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个参数用&隔开,下面传的参数为name=lemon,age=18--> <a href='page/index.html?name=lemon&age=18'></a> 当跳转到页面的时候这个页面的地址栏就会跟你写的那个一样,这时候你只需要获取地址栏的内容并进行采取

Java:集合for高级循环遍历

增强for循环: 格式:for(变量数据类型 要遍历的变量 :元素所在数组(集合)名称) 也即 for(Type element: array或collection) 使用foreach遍历集合: 只能获取集合中的元素,不能对集合进行操作. 而迭代器Iterator除了可以遍历,还可以对集合中的元素遍历时进行remove操作. 如果使用ListIterator还可以在遍历过程中进行增删改查的动作. //例子1: import java.util.*; class Foreach { public

Android中List循环遍历性能对比

在android开发中只要是列表式风格界面我们几乎都需要用到List来存放数据,在数量很少的List的话几乎任何一种循环遍历方式整体性能都无差别,但是当我们遇到数据量稍大的时候有必要考虑用哪种方式写起来比较高性能. 常见的有以下三种: 第一种 for (String s : tests) { // .... } 第二种 int size = tests.size(); for (int i = 0; i < size; i++) { tests.get(i); } 第三种 Iterator<S