写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)是错误的 ）的更多相关文章

  1. 如何获取select中的value、text、index相关值 && 如何获取单选框中radio值 && 触发事件 && radio 默认选中

    如何获取select中的value.text.index相关值 select还是比较常用的一个标签,如何获取其中的内容呢? 如下所示: <select id="select" ...

  2. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  3. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  4. sqlplus 配置方法及相关命令

    sqlplus 配置方法及相关命令 1.配置文件 1.1 全局模式什么叫全局模式呢:当我们配置完sqlplus工具加载配置文件后,无论在哪个目录下登陆数据库,您设置[sqlplus提示符样子,在任何目 ...

  5. 12-关于DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  6. Dom方法，解析XML文件

    Dom方法,解析XML文件的基本操作 package com.demo.xml.jaxp; import java.io.IOException; import javax.xml.parsers.D ...

  7. 关于DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  8. 12 DOM操作的相关案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  9. MySQL执行计划extra中的using index 和 using where using index 的区别

    本文出处:http://www.cnblogs.com/wy123/p/7366486.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...

  10. 聚簇索引(Clustered Index)和非聚簇索引 (Non- Clustered Index)

    本文转自https://my.oschina.net/u/1866821/blog/297673 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...

随机推荐

  1. Azure Pipelines

    https://docs.microsoft.com/en-us/azure/devops/pipelines/?view=vsts

  2. VUE 内置的标签<keep-alive></keep-alive>作用

    <keep-alive></keep-alive> 的作用是 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染组件

  3. 关于ng-if的理论性知识你了解多少？

    ng-if简介: ● 使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素.如果赋值给ng-if 的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重 ...

  4. 【BZOJ】1609: [Usaco2008 Feb]Eating Together麻烦的聚餐

    [算法]动态规划 [题解]DP有个特点(递推的特点),就是记录所有可能状态然后按顺序转移. 最优化问题中DP往往占据重要地位. f[i][j]表示前i头奶牛,第i头改为号码j的最小改动数字,这样每头奶 ...

  5. UITableView---iOS-Apple苹果官方文档翻译

    本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址  //转载请注明出处--本文永久链接:http://www.cnblogs.com/C ...

  6. Codeforces Round #484 (Div. 2)

    题目链接:http://codeforces.com/contest/982 A. Row time limit per test:1 second memory limit per test:256 ...

  7. 大聊Python----SocketServer

    什么是SocketServer? SocketServer的最主要的作用是实现并发处理,也就是可以多个用户同时上传和下载文件. socketserver模块简化了编写网络服务器的任务. sockets ...

  8. js中的for in 循环

    1.数组 使用for in 遍历数组时,其索引被视为对象的属性,从而直接输出数组的索引 var arr = ["a","b","c"]; f ...

  9. Part2-HttpClient官方教程-Chapter4-HTTP 认证

    原文链接地址 HttpClient 提供对由 HTTP 标准规范定义的认证模式的完全支持.HttpClient 的认证框架可以扩展支持非标准的认证模式,比如 NTLM 和 SPNEGO. 4.1 用户 ...

  10. ew做socks5代理

    这个工具和之前讲过的xxoo类似.链接:https://www.cnblogs.com/nul1/p/8883271.html https://zhuanlan.zhihu.com/p/3282215 ...