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 IE 浏览器判定代码
Mar 21 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Promise扫盲贴
Jun 24 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
各种页面定时跳转(倒计时跳转)代码总结
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删除目录及目录下所有文件的方法详解
2013/06/06 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
vue与django集成打包的实现方法
2019/11/11 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python全局变量操作详解
2015/04/14 Python
详细介绍Python的鸭子类型
2016/09/12 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
对pandas处理json数据的方法详解
2019/02/08 Python
详解Python3 pickle模块用法
2019/09/16 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python celery原理及运行流程解析
2020/06/13 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
公务员诚信承诺书
2014/05/26 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
python如何做代码性能分析
2021/04/26 Python
Pyhton模块和包相关知识总结
2021/05/12 Python
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
室外天线与收音机天线杆接合方法
2022/04/05 无线电