给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; 可实现每个列表的 ...
随机推荐
- 【BZOJ】1878: [SDOI2009]HH的项链(树状数组)
http://www.lydsy.com/JudgeOnline/problem.php?id=1878 我太弱了,看题解才过的. 一开始看到此题,我想了想在线做法,但之后觉得这个想法可能是错的:维护 ...
- C#操作XML(读XML,写XML,更新,删除节点,与dataset结合等)【转载】
已知有一个XML文件(bookstore.xml)如下: Corets, Eva 5.95 1.插入节点 往节点中插入一个节点: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- Resume简历中装B的词汇总结大全
1. Accelerated 35. Empowered 69. Motivated 2. Accomplished 36. Enabled 70. Negotiated 3. Achieved 37 ...
- 如何删除 OpenStack Nova 僵尸实例
转自:http://www.vpsee.com/2011/11/how-to-delete-a-openstack-nova-zombie-instance/ 前天强制重启一台 OpenStack N ...
- Key-Vlaue Coding Apple官方翻译
今天是键值编码,网上有很多文章,可以百度.不太理解的就看官方文档吧 键-值编码 键值编码是一种运用字符串标识符来间接访问一个对象的属性和关系的机制.它尤其强化并关联了多种Cocoa编程的机制和技术,体 ...
- The resource could not be loaded because the App Transport Security policy requires the use of a secure connection
xmpp 项目中遇到的问题,用苹果的通信API 写一个PUT 方法,向服务器上传一张图片.遇到如题问题. Plist 文件没有NSAppTransportSecurity属性 Dic,添加该属性,再添 ...
- Mysql时间函数
http://blog.sina.com.cn/s/blog_6d39dc6f0100m7eo.html mysql中函数和关键字不区分大小写.下文函数的datetime参数处既可以用时间字符串也可以 ...
- Nginx 笔记与总结(11)Nginx + php-fpm + MySQL 安装 ecshop
下载 ecshop (ECShop_V2.7.3_UTF8_release1106)安装包,解压之后把 upload 文件夹使用 ftp 传到服务器的 /usr/local/html 目录下,同时改名 ...
- mysql join表连接
1.表连接,就是将两个表合并起来,被合并的表的记录要通过中间字段,一一匹配起来左边的表的记录,形成一张临时的合并的表,并且每条记录的值都是两张表一一准确对应的 实例 尝试以下实例: root@host ...
- phantomjs 安装使用
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...