DOM方法index()相关问题(为何$(this).index(this)是错误的 )

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)是错误的 )

时间: 2024-10-29 19:10:33

DOM方法index()相关问题(为何$(this).index(this)是错误的 )的相关文章

关于DOM的事件操作/DOM介绍/关于DOM操作的相关案例

一.关于DOM的事件操作 1.JavaScript基础分为三个部分: ECMAScript: JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句 DOM: 文档对象模型, 操作网页上的元素的API, 比如让盒子移动, 变色,  轮播图等.. BOM: 浏览器对象模型, 操作浏览器部分功能的API, 比如让浏览器自动滚动 2.事件 JS是以事件驱动为核心的一门语言 3.事件的三要素 (1).事件的三要素: 事件源, 事件, 事件驱动程序 (2).总结: 事件源:

Dom方法,解析XML文件

Dom方法,解析XML文件的基本操作 1 package com.demo.xml.jaxp; 2 3 import java.io.IOException; 4 5 import javax.xml.parsers.DocumentBuilder; 6 import javax.xml.parsers.DocumentBuilderFactory; 7 import javax.xml.parsers.ParserConfigurationException; 8 import javax.x

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

1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; }

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

钢条切割问题求解方法及相关思考

钢条切割问题求解方法及相关思考 题目来源于<算法导论>第15章第一节.问题如下: 给定一个长度为n英寸的钢条和一个价格表pi(i=1,2,3,...n),求能够使销售收益rn最大的切割方案. 问题1:一共有多少种切割方式? 思路一:对于一个长度为n英寸的钢条,其中一共有n-1个节点可供切割,在每一个节点处都可以选择切割或者不切割,将对一根钢条的切割过程视为从第一个节点直到第n-1个节点逐一选择切割或者不切割的一个过程,利用乘法原理,可以算出来总共有2n-1种切割方案.以四个节点的钢条为例: 思

HttpClient有关方法及相关优化整理

HttpClient4中采用 ThreadSafeClientConnManager来保证线程的安全,优于2.0的 MultiThreadedHttpConnectionManager类.另外Apache官方强烈推荐只使用一个HttpClient的实例,所以我 们可以将以下demo方法写成单例模式. demo将使用StringEntity来完成不指定参数名发送Post,已经采用ThreadSafeClientConnManager来保证线程的安全 ? 1 2 3 4 5 6 7 8 9 10 1

HTML DOM 方法

方法是我们可以在节点(HTML 元素)上执行的动作. 编程接口 可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). 属性是您能够获取或设置的值(比如节点的名称或内容). getElementById() 方法 getElementById() 方法返回带有指定 ID 的元素: 例子 <!DOCTYPE html> <html> <

innerHTML对比DOM方法,哪个性能好?有什么区别?

innerHTML对比DOM方法,哪个性能好?有什么区别?是个老生常谈的问题!跟浏览器版本与发展有关! innerHTML是w3c制定的行业标准,几乎所有浏览器都做了支持: 作为原生支持,innerHTML在各主流浏览器下的执行效率是很高的: 但是他有他的缺陷,特别是在ie低版本浏览器下,不支持html5.还有一些其他的标签属性. 直接测试的话,速度明显innerHTML比DOM方法要快很多(包括撸代码的速度),但是有说在webkit内核的浏览器中DOM方法比innerHTML要快. 平时采用j

第一话:IE中用DOM方法绑定事件

工作比较忙,但是也一定要抽时间出来提升一下自己的基本功,只有技术实力到位,才能为公司和个人创造更多的价值.下面进入主题: IE中事件监听比较容易用到,但是由它所引出的一个关于this的问题,不得不着重的去思考和记录一下. 一.浏览器中不同的事件监听/绑定(个人感觉用监听比较通俗易懂): //IE element.attachEvent("event",functionname); //参数:1,表示监听的事件,需要在事件前加on(onclick,onfocus,onkeyevent……