给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. cJSON应用举例

    //在网上查了不少cJSON,结果只找到c语言字符串转换到JSON的实例,想转回来结果没有实例.自己琢磨了一个下午才敢下手.下面把转来转去的代码贴上. //百度网盘的 CJSON 实例源码 地址 ht ...

  2. winform学习-----理解小概念-20160518

    一.设置滚动,滚动列遮住内容的解决办法 1.datagridview三个属性:autosizecolumsmode none autosizeRowsmode   none dock  fill 2. ...

  3. 通过JDBC连接hive

    hive是大数据技术簇中进行数据仓库应用的基础组件,是其它类似数据仓库应用的对比基准.基础的数据操作我们可以通过脚本方式以hive-client进行处理.若需要开发应用程序,则需要使用hive的jdb ...

  4. [转].net 缩略图方法

    本文转自:http://www.cnblogs.com/promic/archive/2010/04/21/1717190.html private static string strConnect ...

  5. Why Consumer Hardware Start-ups Fail

    今年看到一篇文章还是很受启发. If you have the guts to start selling what you believe in, customers who share your ...

  6. [GE]导入图片至Word,然后按规则命名(2/2)

    #将所有docx文件改成可读 Set-ItemProperty -Path "e:\screenshot\*.docx" -Name IsReadOnly -Value $fals ...

  7. 让apache不区分图片和文件后缀大小写

    加载mod_speling模块: LoadModule speling_module /usr/lib/apache2/modules/mod_speling.so 开启模块: CheckSpelli ...

  8. 投芯片,现在要n+1模式

    给坚持理想的屌丝点个赞.投芯片,现在要n+1模式,n个小项目+一个大项目.团队是基础,屌丝创业要以营利为先导,先要短快,同时要有并行的大项目支撑.小项目赚的钱先解决面包问题,同时为大项目锻炼队伍积累经 ...

  9. 10. 求N分之一序列前N项和

    求N分之一序列前N项和 #include <stdio.h> int main() { int i, n; double item, sum; while (scanf("%d& ...

  10. TenxCloud时速云.htaccess不起作用的解决办法

    在新建容器时添加变量: ALLOW_OVERRIDE ,并将值设置为 TURE 即可.