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 04 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
node.js中的buffer.slice方法使用说明
Dec 10 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
浅谈js中的this问题
Aug 31 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
各种页面定时跳转(倒计时跳转)代码总结
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开发GUI
2006/10/09 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
js实现右键弹出自定义菜单
2020/09/08 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
应届生保险求职信
2013/11/11 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
师德师风的心得体会
2014/09/02 职场文书
前台接待员岗位职责
2015/04/15 职场文书
《观察物体》教学反思
2016/02/17 职场文书
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技