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 相关文章推荐
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
AngularJS入门教程引导程序
Aug 18 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
node中短信api实现验证码登录的示例代码
Jan 20 Javascript
QT与javascript交互数据的实现
May 26 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
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
捐款倡议书怎么写
2014/05/13 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书