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 相关文章推荐
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
js实现登录与注册界面
Nov 01 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
JavaScript函数柯里化
Nov 07 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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php中异常处理方法小结
2015/01/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
PHP会话控制实例分析
2016/12/24 PHP
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
js Function类型
2011/12/04 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
js闭包学习心得总结
2018/04/17 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python生成器(Generator)详解
2015/04/13 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python实现简单http服务器功能
2018/09/17 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
外科实习自我鉴定
2013/10/06 职场文书
2014年法务工作总结
2014/12/11 职场文书
中国合伙人观后感
2015/06/02 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
python高温预警数据获取实例
2022/07/23 Python