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


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 相关文章推荐
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
JavaScript实现音乐播放器
Aug 14 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
str_replace只替换一次字符串的方法
2013/04/09 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
小程序实现投票进度条
2019/11/20 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python logging模块的使用
2020/09/07 Python
python实现图片转字符画
2021/02/19 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
证婚人搞笑证婚词
2014/01/10 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
党员大会主持词
2014/04/02 职场文书
条幅标语大全
2014/06/20 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
解约证明模板
2015/06/19 职场文书
新郎结婚感言
2015/07/31 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
redis protocol通信协议及使用详解
2022/07/15 Redis