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 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...
随机推荐
- poj2060——Taxi Cab Scheme（最小路径覆盖）
Description Running a taxi station is not all that simple. Apart from the obvious demand for a centr ...
- [samba]samba设置指定用户权限
步骤: 1.在系统中添加用户 批量添加用户和密码的方法(因为samba用户要求必须在系统中存在): for name in a b c d;do useradd $name ; echo " ...
- saltstack:multi-master configuration
官方手册地址:http://docs.saltstack.com/topics/tutorials/multimaster.html 总结起来,有以下几步: Create a redundant ma ...
- bzoj1177 [Apio2009]Oil 二维前缀最大值，和
[Apio2009]Oil Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 2300 Solved: 932[Submit][Status][Disc ...
- 编译skia静态库时，图片解码库无法注册的问题
转载:http://www.cnblogs.com/imlucky/archive/2012/08/01/2617851.html 今天编译skia库,增加图片解码库时总是无效.按照此博客的方法修改后 ...
- java nio buffer读取数据乱码问题
public static void main(String[] args) throws IOException { String charsetName = "GBK"; St ...
- JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制
知识点总结: Sea.js的使用:define.export.seajs.use.require等方法: 参考:http://seajs.org/docs/ Sea.js与require.js的区 ...
- hdu 3689 Infinite monkey theorem
Infinite monkey theorem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/ ...
- CAS单点登录原理
转自 https://www.cnblogs.com/lihuidu/p/6495247.html 1.基于Cookie的单点登录的回顾 基于Cookie的单点登录核心原理: 将用户名密 ...
- 【BZOJ】1724 [Usaco2006 Nov]Fence Repair 切割木板
[算法]贪心+堆 #include<cstdio> #include<algorithm> using namespace std; ; int n,heap[maxn],sz ...