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 IE和FF兼容性问题汇总
Feb 09 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
jquery获取radio值实例
Oct 16 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 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
解析argc argv在php中的应用
2013/06/24 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
用JS实现的一个include函数
2007/07/21 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
详解python:time模块用法
2019/03/25 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
C++面试题目
2013/06/25 面试题
学院领导推荐信
2013/10/30 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
委托证明书
2014/09/17 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
签证工作证明模板
2015/06/15 职场文书
Python编写冷笑话生成器
2022/04/20 Python