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 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
Oct 14 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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
async和DOM Script文件加载比较
2014/07/20 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
php微信开发自定义菜单
2016/08/27 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
python 获取list特定元素下标的实例讲解
2018/04/09 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python解析多层json操作示例
2019/12/30 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
Python序列化pickle模块使用详解
2020/03/05 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
工作交流会欢迎词
2014/01/12 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
事业单位鉴定材料
2014/05/25 职场文书
员工工作自我评价
2014/09/26 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
Python循环之while无限迭代
2022/04/30 Python