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


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 相关文章推荐
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
Javascript实现基本运算器
Jul 15 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
读jQuery之一(对象的组成)
2011/06/11 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
js new Date()实例测试
2019/10/31 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
python实现哈希表
2014/02/07 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
《从现在开始》教学反思
2014/04/15 职场文书
放假通知范文
2015/04/14 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫