给ul中的li添加事件的多种方法
给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添加事件的多种方法的更多相关文章
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- PHP 中提示undefined index如何解决(多种方法)
PHP 中提示undefined index如何解决(多种方法) 这篇文章主要介绍了PHP 中提示undefined index如何解决(多种方法)的相关资料,需要的朋友可以参考下 一.相关信息 平时 ...
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)
原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...
- OAF TABLE中第一列添加事件不生效
我遇到一个比较诡异的现象 在TABLE中,我在TABLE的第一列添加了一个MessageCheckBox,并为其设置全局刷新的FireAction事件selection, 但是点击勾选框按钮之后,事件 ...
- JavaScript的闭包特性如何给循环中的对象添加事件(一)
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- js遍历(获取)ul中的li
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 导航栏的ul中的li设置问题
在css中 设置li的float:left 可以实现列表在同一行显示 设置每个li的宽度相等,可以实现每个列表的分离状态. 设置每个li中的文字,text-align:center; 可实现每个列表的 ...
随机推荐
- android BroadcastReceiver ACTION_TIME_TICK 系统时间监听不到
android BroadcastReceiver ACTION_TIME_TICK 系统时间监听不到 今天做android上的消息推送,启动了一个独立service,然后在里面监听系统的ACTION ...
- javascript获取随机数的几种方式
//获取0-num的随机数 function randomNum(num){ return Math.floor(Math.random()*num); } //获取start-end的随机数 fun ...
- Phaser提供了Button对象简单的实现一个按钮
Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...
- HDU 1007 Quoit Design(二分+浮点数精度控制)
Quoit Design Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- gcc/g++链接时.o文件及库的顺序问题
折腾gcc/g++链接时.o文件及库的顺序问题 链接静态库的顺序问题 GCC 编译使用动态链接库和静态链接库--及先后顺序----及环境变量设置总结
- html5 data
对于html5 的data使用 <div id='testDiv' data-value='123' data-name='china'> 通过var v = document.getLE ...
- Javascript 笔记与总结(2-14)事件
常用事件: ● onclick 元素点击时 ● onfocus 元素获得焦点时 ● onblur 元素失去焦点时 ● onmouseover 鼠标经过时 ● onsubmit 表单提交时(<fo ...
- typecho流程原理和插件机制浅析(第一弹)
typecho流程原理和插件机制浅析(第一弹) 兜兜 393 2014年03月28日 发布 推荐 5 推荐 收藏 24 收藏,3.5k 浏览 虽然新版本0.9在多次跳票后终于发布了,在漫长的等待里始终 ...
- 1st-code-review summary
每次做code review,先贤谆谆教诲便在耳畔响起: "There are only two hard problems in Computer Science: cache inval ...
- JS基础语法
1.注释语法://单行注释./*多行注释*/. 2.输出语法:{1.alert("要输出的字符串"):.alert(输出其类型): 2.confirm():弹出一个可以和用户交互 ...