实现点击列表弹出列表索引的两种方式


Posted in Javascript onMarch 08, 2013

方式一,使用利用事件冒泡委托给列表的父节点去处理的方式

var ulObj = document.getElementById("myUl"); 
ulObj.onclick = function (event) { 
var tg = event.target; 
var liArray = ulObj.getElementsByTagName("li"); 
for (var i = 0; i < liArray.length; i++) { 
if (liArray[i] === tg) { 
alert(i + 1); 
} 
} 
}

方式二,使用闭包
var liArray = document.getElementById("myUl").getElementsByTagName("li"); 
for (var i = 0; i < liArray.length; i++) { 
(function () { 
var n = i; 
liArray[i].onclick = function () { 
alert(n + 1); 
} 
})(i) 
}

HTML代码
<ul id='myUl'> 
<li>haha</li> 
<li>heihei</li> 
<li>hehe</li> 
<li>gaga</li> 
</ul>
Javascript 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
很好用的js日历算法详细代码
Mar 07 #Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 #Javascript
JS链式调用的实现方法
Mar 07 #Javascript
jQuery滚动加载图片效果的实现
Mar 06 #Javascript
HTML上传控件取消选择
Mar 06 #Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 #Javascript
JQuery操作tr和td内容的方法实例
Mar 06 #Javascript
You might like
Yii开启片段缓存的方法
2016/03/28 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
javascript数组去重小结
2016/03/07 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python字典基本操作实例分析
2015/07/11 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
python模拟斗地主发牌
2020/04/22 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
岗位说明书怎么写
2014/07/30 职场文书
2015年大学生实习评语
2015/03/25 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python