给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. iOS移动开发周报-第24期

    iOS移动开发周报-第24期 [摘要]:本期iOS移动开发周报带来如下内容:苹果更新了iTunes Connect的设计.UIKit Dynamics 教程:抛掷 Views.iOS APP 架构漫谈 ...

  2. c++ <string.h>中包括哪些常用函数

    常用函数如下:strlen  求字符串长度strcmp  比较2个字符串是否一样strcat           字符串连接操作strcpy            字符串拷贝操作strncat     ...

  3. 《GK101任意波发生器》升级固件发布(版本:1.0.2.build124)

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build124 编译日期:2014-08-19 ====================================== 二. ...

  4. jedis操作

    Jedis jedis = RedisUtil.getJedis(); try { // 向key-->name中放入了value-->minxr jedis.set("name ...

  5. PHP函数补完 - var_export

    var_export() 函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP 代码.var_export必须返回合法的php代码, 也就是 ...

  6. 【IOS笔记】Delegation

    Delegation Delegation is a simple and powerful pattern in which one object in a program acts on beha ...

  7. python函数参数

    1.位置参数 2.默认参数 指向参数为不可变对象 3.可变参数 **args    一个列表list或是元组tuple 4.关键字参数 **kw,是一个字典dict 5.命名关键字参数 *,

  8. svn local obstruction, incoming add upon merge

    http://little418.com/2009/05/svn-local-obstruction-incoming-add-upon-merge.html If you've found this ...

  9. Memcached原理深度分析详解

    Memcached是 danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能.关于这个东 西,相信很多人都用过,本文意在通 ...

  10. w-BIG TABLE-view+where-small table

    w-BIG TABLE DROP PROCEDURE IF EXISTS truncate_insert_sales_rank_toparow_month; DELIMITER /w/ CREATE ...