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的威力
Oct 10 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
Javascript动画效果(3)
Oct 11 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
JS实现放烟花效果
Mar 10 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
各种页面定时跳转(倒计时跳转)代码总结
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中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php正则替换处理HTML页面的方法
2015/06/17 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
express框架下使用session的方法
2019/07/31 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
vue实现选中效果
2020/10/07 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python验证文件是否可读写代码分享
2017/12/11 Python
pandas 选择某几列的方法
2018/07/03 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python中下标和切片的使用方法解析
2019/08/27 Python
python ftplib模块使用代码实例
2019/12/31 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
旅游管理专业个人求职信范文
2013/12/24 职场文书
通信研究生自荐信
2014/02/01 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
食品销售计划书
2014/04/26 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
西岭雪山导游词
2015/02/06 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery