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兼容标准的表格变色效果
Jun 28 Javascript
细说javascript函数从函数的构成开始
Aug 29 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
JQuery样式与属性设置方法分析
Dec 07 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP header函数分析详解
2011/08/06 PHP
php常用hash加密函数
2014/11/22 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python3 集合set入门基础
2020/02/10 Python
django使用graphql的实例
2020/09/02 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
电气专业应届生求职信
2013/11/01 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
记者岗位职责
2014/01/06 职场文书
拾金不昧锦旗标语
2014/06/27 职场文书
一份文言文检讨书
2014/09/13 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
收入证明怎么写
2015/06/12 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers