给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. CKEDITOR使用与配置

    安装: 下载CKEDITOR的文件,解压后复制到工程的WEBROOT目录下就OK! 引用CKEDITOR的JS文件: 新建JSP页面,添加其JS文件<script type="text ...

  2. MyLinerLayout--推荐

    苹果系统的自动布局需要在布局的过程中建立各种各样的依赖,虽然后续使用masonry还算比较便捷. 有一天朋友推荐给我的这个,看了一下demo和这个库的作者的博客,了解到这个库并不是基于苹果的自动布局作 ...

  3. [转] - 使用Qt作窗口截屏(含源码)

    截屏(screenshot),就是将屏幕上的东西拷贝下来存成图片文件.介绍的好像有点多余:(,那我们就直接切入正题. QPixmap提供了两个函数grabWidget和grabWindow可以将屏幕上 ...

  4. Delphi 复习代码

    1.取得可文件路径 Path := ExtractFilePath(Application.ExeName); //取得可执行文件路径 TXMLDocument.Create(ExtractFileP ...

  5. git实用攻略

    Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 下面是实用教程,免基础. 一.安装git https://git-scm.com/downloads 二.git创建 ...

  6. PHP显示日期、周几、农历初几、什么节日函数编程代码

    <?function rili($style,$Atime){ $debug = false; $glmonth = date("n",$Atime);    //1-12  ...

  7. 自制Chrome拓展

    淘宝试用自动点击: 谷歌其实就是一些html+css+js+静态资源.但是里面有一个特别的配置文件manifest.json.该文件和Android的那个androidmanifest.xml类似,记 ...

  8. 分布式架构高可用架构篇_01_zookeeper集群的安装、配置、高可用测试

    参考: 龙果学院http://www.roncoo.com/share.html?hamc=hLPG8QsaaWVOl2Z76wpJHp3JBbZZF%2Bywm5vEfPp9LbLkAjAnB%2B ...

  9. ubuntu + subversion + apache2 设置

    1.下载安装subversion,apache2 sudo apt-get updatesudo apt-get upgrade sudo  apt-get install apache2sudo a ...

  10. 【转载】jQuery插件开发精品教程,让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...