给ul中的li添加事件的多种方法

这是一个常见,而且典型的前端面试题

   <ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>

错误方式:

      var len=lis.length;
for(var i=0;i<len;i++){
$(lis[i]).click(function (){
alert(i);
})
}

正确方式一(利用jq中的each)

      var lis=$("ul>li");
$.each(lis,function(index,element){
$(element).click(function (){
alert(index);
}) //这样就添加了天门的坐标
})

正确方式二(闭包)

     for(var i=0;i<len;i++){
(function (index){
$(lis[index]).click(function (){
alert(index); //这种方式也是可以滴呀
})
})(i)
}

正确方式三(动态的该对象添加属性)

     var len=lis.length;
for(var i=0;i<len;i++){
lis[i].indexValue=i;
$(lis[i]).click(function (){
alert(this.indexValue); //这样也是可以的
})
}

给ul中的li添加事件的多种方法的更多相关文章

  1. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  2. PHP 中提示undefined index如何解决(多种方法)

    PHP 中提示undefined index如何解决(多种方法) 这篇文章主要介绍了PHP 中提示undefined index如何解决(多种方法)的相关资料,需要的朋友可以参考下 一.相关信息 平时 ...

  3. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  4. 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  5. 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)

    原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...

  6. OAF TABLE中第一列添加事件不生效

    我遇到一个比较诡异的现象 在TABLE中,我在TABLE的第一列添加了一个MessageCheckBox,并为其设置全局刷新的FireAction事件selection, 但是点击勾选框按钮之后,事件 ...

  7. JavaScript的闭包特性如何给循环中的对象添加事件(一)

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  8. js遍历(获取)ul中的li

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. 导航栏的ul中的li设置问题

    在css中 设置li的float:left 可以实现列表在同一行显示 设置每个li的宽度相等,可以实现每个列表的分离状态. 设置每个li中的文字,text-align:center; 可实现每个列表的 ...

随机推荐

  1. POJ 3440 Coin Toss(概率)

    题目链接 概率问题,像是概率论上学的均匀分布,是不是呢,忘了... 概率同面积有关系,我写的各种搓,然后此题格式十分变态,=前有的时候俩空格,有的时候一个空格.代码各种搓. #include < ...

  2. C#页面添加提交数据后跳出小弹窗的功能

    很简单,将小弹窗部分写进一个div,利用div的visible属性去控制是否显示,首先默认为false; 当后台程序执行到插入数据完成后,设置session状态值为‘yes’ 判断,当session状 ...

  3. 【C语言】13-指针和字符串

    字符串回顾 一个字符串由一个或多个字符组成,因此我们可以用字符数组来存放字符串,不过在数组的尾部要加上一个空字符'\0'. char s[] = "李洪强"; 上面的代码定义了一个 ...

  4. python3环境搭建(CentOS7.2)

    安装python3(自动安装pip3):yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...

  5. 在vs2013中配置openGL(绝对可靠 !)

    首先要下载glut.h glut32.dll glut32.lib.(这个在glut-3.7.6-bin的包里面,可以直接下载 ) 然后: glut.h:放到 D:\vs2013\VC\include ...

  6. XSS的高级利用部分总结 -蠕虫

    XSS的高级利用部分总结 -蠕虫,HTTP-only,AJAX本地文件操作,镜象网页本帖最后由 racle 于 2009-5-30 09:19 编辑 XSS的高级利用总结 -蠕虫,HTTPONLY,A ...

  7. prelaod场景,用来显示资源加载进度

    phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas ...

  8. 通过SEP屏蔽共享文件夹

    Go to Policies – Application and Device Control. Select default Application and Device Control polic ...

  9. Ubuntu输入密码登陆后又跳回到登录界面

    现象:在Ubuntu登陆界面输入密码之后,黑屏一闪并且出现了check battery state之类的文字之后,又跳转到登录界面.原因:主目录下的.Xauthority文件拥有者变成了root,从而 ...

  10. tomcat从下载到使用

    话说,某天正在和周公聊天下大事.被急促的电话铃声召唤回来,所谓江湖救急,于是远程一看.竟然是需要使用tomcat(汤姆家的猫),于是... 下面关于下载和配置tomcat的过程. ①.使用tomcat ...