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 相关文章推荐
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
完美的js图片轮换效果
Feb 05 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
讲解vue-router之命名路由和命名视图
May 28 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
Vue3.0数据响应式原理详解
Oct 09 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语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
深入解析Python中的线程同步方法
2016/06/14 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python遍历字典方式就实例详解
2019/12/28 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
分公司总经理岗位职责
2014/08/03 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
产品质量保证书范本
2015/02/27 职场文书
护士2015年终工作总结
2015/04/29 职场文书
学校捐书活动总结
2015/05/08 职场文书
2015年暑假工作总结
2015/07/13 职场文书