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 options属性集合操作代码
Dec 28 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
javascript的内存管理详解
Aug 07 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
Vue实现简单的留言板
Oct 23 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+mysql留言本源码
2009/11/11 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php组合排序简单实现方法
2016/10/15 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
jQuery插件编写步骤详解
2016/06/03 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
python元组操作实例解析
2014/09/23 Python
简单讲解Python中的闭包
2015/08/11 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
绿色学校实施方案
2014/03/31 职场文书
学生会主席演讲稿
2014/04/25 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
出纳岗位职责
2015/01/31 职场文书
公积金具结保证书
2015/05/11 职场文书
春节晚会开场白
2015/05/29 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
教师网络培训心得体会
2016/01/09 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle