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

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

  1. <ul>
  2. <li>11111</li>
  3. <li>22222</li>
  4. <li>33333</li>
  5. </ul>

错误方式:

  1. var len=lis.length;
  2. for(var i=0;i<len;i++){
  3. $(lis[i]).click(function (){
  4. alert(i);
  5. })
  6. }

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

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

正确方式二(闭包)

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

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

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

给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. Memcached、Redis OR Tair

    一.前言 非关系型数据库(NoSQL = Not Only SQL)的产品非常多,常见的有Memcached.Redis.MongoDB等优秀开源项目,相关概念和资料网上也非常丰富,不再重复描述,本文 ...

  2. Quartz将Job保存在数据库中所需表的说明

    http://blog.iqbon.com/doc/364.html   (将Quartz持久化到数据库的做法)   QRTZ_CALENDARS 以 Blob 类型存储 Quartz 的 Calen ...

  3. jsoup httpclient 爬取网页并下载google图标

    jsoup下载地址 http://www.jsoup.org httpclient下载地址 http://hc.apache.org/downloads.cgi 其他jar包见附件 Crawler p ...

  4. Quartz与Spring整合进行热部署的实现(二)

    Spring的org.springframework.scheduling.quartz.JobDetailBean提供Job可序列化的实现(具体实现可查看源码) 此时.我们原来的job就可以继承Qu ...

  5. MatLab 组件大全

    MATLAB                                                                    矩阵实验室 7.0.1 Simulink       ...

  6. Odoo 二次开发教程【一】 Odoo 的安装

    一,安装的两种方式: 1) deb包安装: 此安装方式适用于简单不需要太多的人工干预,大多数插件都在deb中涵盖了.具体的步骤如下: 1.编辑 /etc/apt/source.list 文件,在末尾添 ...

  7. Spark - RDD(弹性分布式数据集)

    org.apache.spark.rddRDDabstract class RDD[T] extends Serializable with Logging A Resilient Distribut ...

  8. IM客户端Socks 5代理协议应用

    之前编写的一个基于openfire服务器的即时通讯软件,因为部署环境需要,需要增加代理登录通信的实现.整理了一下相关代理的知识分享一下. 一个基于TCP协议的客户端希望与一个只能通过特定网络节点才可以 ...

  9. linux进程用户内存空间和内核空间

    When a process running in user mode requests additional memory, pages are allocated from the list of ...

  10. YII2.0 secruity

    保存密码不能用明文保存,用MD5或者sha1哈希化是安全,但是随着硬件的发展,可能会暴力破解,目前能够对抗暴力破解的哈希算法是 bcrypt,Yii提供了两个帮助函数使用crypt进行安全的哈希加密 ...