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 相关文章推荐
JAVASCRIPT对象及属性
Feb 13 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
js实现文字截断功能
Sep 14 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
VUE中使用MUI方法
Feb 12 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 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
海贼王:最美的悬赏令!
2020/03/02 日漫
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php时间戳转换的示例
2014/03/31 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
Javascript之String对象详解
2016/06/08 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
Python中常见的异常总结
2018/02/20 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python实现烟花小程序
2019/01/30 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
销售总经理岗位职责
2014/03/15 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
新闻编辑求职信
2014/07/13 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
给客户的感谢信
2015/01/21 职场文书
离婚起诉书范本
2015/05/18 职场文书
少年犯观后感
2015/06/11 职场文书
交通处罚决定书
2015/06/24 职场文书
Python实现双向链表基本操作
2022/05/25 Python