DOM方法index()相关问题（为何$(this).index(this)是错误的 ）
写jQuery的时候遇到一个关于index()的问题，查找相关资料后，解决了，把自己的想法写在下面。
index() 方法返回指定元素相对于其他指定元素的 index 位置。
完全语法为：$(selector).index(element) ，其中element为可选参数。
1、若是省略element,则 获得第一个匹配元素相对于其同胞元素的 index 位置。
例如在如下代码中
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li").click(function(){
alert($(this).index());
});
});
</script>
</head>
<body>
<p>点击列表项可获得其相对于同胞元素的 index 位置：</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
$(this).index(); $(this)代表的是点击的那个 li 元素，index()获得是这个 li 元素（它本身即是第一个匹配自己的元素）相对于它的同胞元素的索引值。这个是正确的，是我们所需要的效果。
若是写成：$('ul li').index(); 则输出的值都是 0 ，因为 $('ul li').index() 获取的是li元素下第一个匹配的元素相对于同胞元素的索引值，即第0个元素。
2、不省略element元素
还是上述代码，若改成$(this).index(this)，则输出的值全部为0。
这是因为，加上了element元素后 $(selector).index(element)，是获得元素相对于选择器的 index 位置。
也就是说，$(this).index(this) 这样写的话，我们是获取的当前点击的 li 相对于它本身的位置，即0。
若是写成 $('ul li').index(this) 则是可以的，因为获取到的是点击的 li 元素相对于选择器选择的ul下的 li 元素的位置，因此可以得到正确的索引值。
总结
综上，我们知道 $(this).index() = $('ul li').index(this) ，这两种方式在我们的语境中能正确的获取到元素的索引值。
这说白了还是对选择器(selector)和this的理解问题。
DOM方法index()相关问题（为何$(this).index(this)是错误的 ）的更多相关文章
- 如何获取select中的value、text、index相关值 && 如何获取单选框中radio值 && 触发事件 && radio 默认选中
如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- sqlplus 配置方法及相关命令
sqlplus 配置方法及相关命令 1.配置文件 1.1 全局模式什么叫全局模式呢:当我们配置完sqlplus工具加载配置文件后,无论在哪个目录下登陆数据库,您设置[sqlplus提示符样子,在任何目 ...
- 12-关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- Dom方法，解析XML文件
Dom方法,解析XML文件的基本操作 package com.demo.xml.jaxp; import java.io.IOException; import javax.xml.parsers.D ...
- 关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 12 DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- MySQL执行计划extra中的using index 和 using where using index 的区别
本文出处:http://www.cnblogs.com/wy123/p/7366486.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...
- 聚簇索引(Clustered Index)和非聚簇索引 (Non- Clustered Index)
本文转自https://my.oschina.net/u/1866821/blog/297673 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...
随机推荐
- Random Numbers Gym - 101466K dfs序+线段树
Tamref love random numbers, but he hates recurrent relations, Tamref thinks that mainstream random g ...
- mybatis <where>、<set>、<trim>、<sql>、<foreach>标签的使用
转:http://www.cnblogs.com/lixiujie/p/5766669.html <resultMap>标签的使用:这个类似于hibernte用于映射我们创建的vo对象与数 ...
- MQ对比
转:http://blog.csdn.net/linsongbin1/article/details/47781187 MQ框架非常之多,比较流行的有RabbitMq.ActiveMq.ZeroMq. ...
- [samba]samba设置指定用户权限
步骤: 1.在系统中添加用户 批量添加用户和密码的方法(因为samba用户要求必须在系统中存在): for name in a b c d;do useradd $name ; echo " ...
- ubuntu10.04 安装gcc4.1.2
After a bunch of searching to get gcc-4.1 & g++-4.1 in Ubuntu 10.10 (maverick), I found easy wor ...
- DIV CSS display(block,inline,none)的属性教程
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- Maven -- 将引用的本地jar文件打进war包里
我们在做maven项目开发中有时候引用了本地第三方包,例如: <dependency> <groupId>org.artofsolving.jodconverter</g ...
- 彻底找到 Tomcat 启动速度慢的元凶 /dev/random
参考 http://blog.csdn.net/u013939884/article/details/72860358
- 关于C++的宏：WIN32和DEBUG
判断平台相关,判断程序是属于debug版本还是release版本,我们会这么做. #ifdef WIN32 #else #endif #ifdef DEBUG // 如果是调试版本 #else //发 ...
- Vuejs - 深入浅出响应式系统
Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 Javascript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接,不过理解其工作原理同样非常重要,这样 ...