jquery索引在使用中的一些困惑


Posted in Javascript onOctober 24, 2013

今日同事很正式的向我提出了两个关于jquery的问题,我也很正式得做了回答,顺便把源码贴到这里希望对朋友们有所帮助:

<script type="text/javascript"> 
$(function(){ 
$("input[type=button]").click(function(){ 
alert($(this).index()); 
}) 
}) 
</script> 
<ul> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
<li><input type="button" value="按钮一" /></li> 
</ul>

问题一:为什么现在弹出来每个button(在ul>li中的)的索引值都是零,为什么不是从0-9排列的;
答:第一个匹配元素的 index,相对于同胞元素,获得第一个匹配元素相对于其同胞元素的 index 位置。请注意是"同胞".
<script type="text/javascript"> 
$(function(){ 
$("input[type=button]").click(function(){ 
alert($(this).index()); 
}) 
}) 
</script> 
<ul> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
<input type="button" value="按钮一" /><br /> 
</ul>

问题二:为什么在button不在ul>li中,并且每个button后面加<br />的时候,弹出button的索引值翻了一倍,是从0-18的啊?
答:因为<br />也是同胞元素.

以下是在百度百科中查到的"同胞"的含义:
同父母所生的,例如同胞兄弟;

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 #Javascript
js 浏览本地文件夹系统示例代码
Oct 24 #Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 #Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 #Javascript
js获取事件源及触发该事件的对象
Oct 24 #Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 #Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 #Javascript
You might like
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python交互式图形编程实例(一)
2017/11/17 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Python正则表达式如何匹配中文
2020/05/27 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
大学运动会通讯稿
2014/01/28 职场文书
交通事故协议书
2014/04/15 职场文书
本科生就业推荐信
2014/05/19 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
病房管理制度范本
2015/08/06 职场文书
党性修养心得体会2016
2016/01/21 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python