写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. hzwer分块九题(暂时持续更新)

    hzwer分块9题 分块1:区间加法,单点查询 Code #include<bits/stdc++.h> #define in(i) (i=read()) using namespace ...

  2. lightoj 1214

    lightoj 1214 Large Division  (大数除法) 链接:http://www.lightoj.com/volume_showproblem.php?problem=1214 题意 ...

  3. rank() within group用法【转】

    参考:http://www.itpub.net/thread-241824-1-1.html  http://blog.itpub.net/13379967/viewspace-481811/ ) w ...

  4. js随机数生成与排序

    'use strict'; // 排序算法. // 生成一个指定数量的不含重复数字的随机数组 function ranArr(n,callback) { var res = []; var tmp ; ...

  5. [SDOI2011] 染色(Luogu 2486)

    题目描述 输入输出格式 输入格式: 输出格式: 对于每个询问操作,输出一行答案. 输入输出样例 输入样例#1: 6 5 2 2 1 2 1 1 1 2 1 3 2 4 2 5 2 6 Q 3 5 C ...

  6. Jmeter-Java heap内存溢出

    使用jmeter进行压力测试时遇到一段时间后报内存溢出outfmenmory错误,导致jmeter卡死了,先尝试在jmeter.bat中增加了JVM_ARGS="-Xmx2048m -Xms ...

  7. 有趣的浏览器地址栏js代码

    1.编辑网页 在地址栏输入下面的代码按enter,网页上所有元素都能变成可编辑状态,你可以移动.调整元素大小.如果你只是讨厌某个网站想发泄一下,我建议你使用NetDisater. 代码如下: 程序代码 ...

  8. sublime3 快捷键大全

    Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所有打开文件Ctrl+Shift+V:粘贴并格 ...

  9. ImageView设置边框 以及内部图片居中显示 在AndroidStudio中添加shape.xml文件

    效果如图 边框设置:shape文件 <shape xmlns:android="http://schemas.android.com/apk/res/android"> ...

  10. js中的for in 循环

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