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


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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
原生js实现滑块区间组件
Jan 20 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
php实现插入排序
2015/03/29 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python调用Windows命令打印文件
2020/02/07 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
吨的认识教学反思
2014/04/27 职场文书
老公保证书范文
2014/04/29 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
总经理司机岗位职责
2015/04/10 职场文书
毕业设计致谢语
2015/05/14 职场文书
车间班组长竞聘书
2015/09/15 职场文书
高中生物教学反思
2016/02/20 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
MySQL 语句执行顺序举例解析
2022/06/05 MySQL