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 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...
随机推荐
- ClusterId read in ZooKeeper is null 处理
ClusterId read in ZooKeeper is null. Re-running the program after fixing issue 1 will result in the ...
- jquery多组图片层次切换的焦点图
效果:
- npm 淘宝镜像安装以及安装报错window_nt 6.1.7601 解决
http://www.cnblogs.com/ycxhandsome/p/6562980.html npm config set proxy null npm config set https-pro ...
- Flume入门——Selector、Chanel等
1.selector (http://blog.csdn.net/looklook5/article/details/40430965) (http://blog.csdn.net/xiao_jun_ ...
- Spring Boot 启动报错：LoggingFailureAnalysisReporter
17:57:19: Executing task 'bootRun'... Parallel execution with configuration on demand is an incubati ...
- 【BZOJ1449&&2895】球队预算 [费用流]
球队预算 Time Limit: 10 Sec Memory Limit: 256 MB[Submit][Status][Discuss] Description 在一个篮球联赛里,有n支球队, 球 ...
- HDU - 5327 Olympiad（一维前缀和）
Olympiad Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem ...
- 关于scala 集合 List Map Set
1,数组 2,List,ListBuffer 3, Map , mutable.Map
- 深入理解javascript原型和闭包（2）——函数与对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
- 新建一个express工程，node app无反应
1.问题描述 新建一个express工程,node app以后无反应,浏览器输入localhost:3000,显示如下 2.解决方法 在app.js文件中加入如下代码 app.listen(3000, ...