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 07 Javascript
Javascript中的变量使用说明
May 18 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 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中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
djang常用查询SQL语句的使用代码
2019/02/15 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
How to spawning asynchronous work in J2EE
2016/08/29 面试题
销售自我评价
2013/10/22 职场文书
自我鉴定写作要点
2014/01/17 职场文书
承诺书格式范文
2014/06/03 职场文书
三方股份合作协议书
2014/10/13 职场文书
社区好人好事材料
2014/12/26 职场文书
老兵退伍感言
2015/08/03 职场文书
房产遗嘱范本
2015/08/06 职场文书