写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. 006.C++头文件

    1.引用头文件 标准头文件       #include <iostream> 自定义头文件   #include "complex.h" 2.防卫式(guard)声明 ...

  2. 02.树的序列化与反序列化(C++)

    1.二叉树的序列化 输入的一棵树: //二叉树的先序遍历-序列化 #include <iostream> #include <string> #include <sstr ...

  3. POJ 3579 二分

    Median Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7687   Accepted: 2637 Descriptio ...

  4. 小米路由器设置DMZ主机 并在外网访问

    一.前提条件: 1.小米路由器 2.拥有公网IP的网络 二.步骤: 1.登陆小米路由器管理界面  miwifi.com 2.高级设置=>端口转发  页面底部的DMZ选项开启,然后选择需要映射到外 ...

  5. Cycle Sort

    Cycle sort的思想与计数排序太像了,理解了基数排序再看这个会有很大的帮助, 圈排序与计数排序的区别在于圈排序只给那些需要计数的数字计数,先看完文章吧,看完再回来理解这一句话 所谓的圈的定义,我 ...

  6. 【NOIP】提高组2013 积木大赛

    [算法]找规律(听说还有写RMQ的www) [题解]ans+=(a[i]-a[i-1])  (i=1...n)(a[i]>a[i-1]) 后面比前面大k,说明要新叠加k个区间来达到所需高度.(看 ...

  7. 崩坏3mmd中的渲染技术研究

    http://youxiputao.com/articles/11839 主要是参考该篇文章做一个微小的复盘. 漫反射与高光 文章中的漫反射与高光并不是类似于普通的 resultCol = Diffu ...

  8. Java 关于微信公众号支付总结附代码

    很多朋友第一次做微信支付的时候都有蒙,但当你完整的做一次就会发现其实并没有那么难 业务流程和应用场景官网有详细的说明:https://pay.weixin.qq.com/wiki/doc/api/js ...

  9. C++之参数总结

    函数的形参为函数提供了已命名的局部存储空间,它是在函数的形参表中定义的,并由调用函数时传递给函数的实参初始化,而形参的 初始化与变量的初始化一样,如果形参具有非引用类型,则复制实参的值,如果形参为引用 ...

  10. JAVA 线程状态及转化

    线程状态图 说明:线程共包括以下5种状态.1. 新建状态(New)         : 线程对象被创建后,就进入了新建状态.例如,Thread thread = new Thread().2. 就绪状 ...