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学习笔记(十)
Jan 17 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 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中的cookie
2006/11/26 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
浅说js变量
2011/05/25 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
vue-router单页面路由
2017/06/17 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python格式化字符串实例总结
2014/09/28 Python
Python3数字求和的实例
2019/02/19 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
会计学专业学生的求职信范文
2014/01/27 职场文书
股份转让协议书
2014/04/12 职场文书
养牛场项目建议书
2014/05/13 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫