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


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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
javascript写的一个链表实现代码
Oct 25 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
js实现简单的验证码
2015/12/25 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
如何进行有效的自我评价
2013/09/27 职场文书
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
护士自我介绍信
2014/01/13 职场文书
小学六年级学生评语
2014/04/22 职场文书
2014年党支部学习材料
2014/05/19 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
环境保护建议书
2014/08/26 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
高考升学宴答谢词
2015/01/20 职场文书
运动会加油稿50字
2015/07/21 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL