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 相关文章推荐
简单的js分页脚本
May 21 Javascript
jQuery MD5加密实现代码
Mar 15 Javascript
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
详解javascript中的babel到底是什么
2018/06/21 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python判断Abundant Number的方法
2015/06/15 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
教师节表彰会主持词
2015/07/06 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
2015大一新生军训感言
2015/08/01 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS