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 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...
随机推荐
- Codeforces Round #544 (Div. 3) 题解
Codeforces Round #544 (Div. 3) D. Zero Quantity Maximization 题目链接:https://codeforces.com/contest/113 ...
- C++智能指针 auto_ptr
C++智能指针 auto_ptr auto_ptr 是一个轻量级的智能指针, 定义于 memory (非memory.h)中, 命名空间为 std. auto_ptr 适合用来管理生命周期比较短或者不 ...
- uboot下的命令行
1.典型嵌入式linux系统启动过程: 嵌入式系统上电后先执行uboot.然后uboot负责初始化DDR,初始化Flash,然后将OS从Flash中读取到DDR中,然后启动OS(OS启动后uboot就 ...
- Java的Comparable接口的一个陷阱
转载自:http://my.oschina.net/jack230230/blog/56339 Java的Comparable接口提供一个对实现了这个接口的对象列表进行排序的办法.原始的排序对于简单的 ...
- 【PHP】Windows下配置用mail()发送邮件
ZZ:解决windows系统下php.ini邮件配置正确不发送邮件的问题 php mail()函数在windows不能用,需要安装sendmail,假如是用的XAMPP,则已经下载好,不需要重新下载~ ...
- Create MSSQL Procedure
代码: CREATE PROCEDURE [dbo].[sp_UpdateCouponCount] AS GO
- Enterprise Architect 13 ： 设置默认代码环境
设置默认代码环境: Configure -> Options -> Source Code Engineering -> Default Language For Code Gene ...
- 知问前端——Ajax登录
本文,将使用Ajax登录. 一.服务器端代码 is_user.php: <?php require 'config.php'; $query = mysql_query("SELECT ...
- socket 极值数量
在做Socket 编程时,我们经常会要问,单机最多可以建立多少个 TCP 连接,本文将介绍如何调整系统参数来调整单机的最大TCP连接数. Windows 下单机的TCP连接数有多个参数共同决定,下面一 ...
- 【Luogu】P3933 Chtholly Nota Seniorious
[题意]将n*m矩阵分成两个区域,要求满足一定条件,求两区域内部极差较大值最小.n,m<=2000 [算法]二分 [题解]极差的数值满足单调性,所以考虑二分极差. 对于给定的极差,将所有数值排序 ...