Jquery中index()问题

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

对于Jquery中的index()问题,很多人会说这个很简单的,并不是一个非常困难的方法。笔者开始的时候也是这样子认为的,但是今天遇到一个index的问题,让我忙了一个晚上都没有解决,最后还是使用console.log()一个个地测,最后才发现问题所在。

首先,让我们看下index的用法(资料来源:http://www.php100.com/manual/jquery/)

搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

(1)如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。

(2)如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。

(3)如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。

对于(2)(3),相信大家看了相关的文档之后都能了解,下面重点讲一下(1)

首先考虑一个问题,假设当我们要选择同一个元素p,在jquery中有两种方式:$('p') 和$('xx.xx xx p'),哪一种更好?

这两种方式有什么区别呢?

这得从index的定义说起,当方法index()不传入参数时,其得出的结果是这个元素在同辈中的索引位置。这是什么意思呢?看下列代码

<ul><divid="foo">foo</div>//(仅仅是假设,不推荐使用这种方法)<liid="bar">bar</li><liid="baz">baz</li></ul>

执行$('#bar').index()。返回值是1,而不是0。这是为什么呢?这里因为不传入参数,index()返回的是与('#bar')同辈的位置,而在上述例子当中div是与下面的li同辈的,所以返回值是1.如果你要避免这样的情况出现,唯一的方法就是在搜索元素的时候,尽可能采用$('p') 和$('xx.xx xx p')中后者的方法。这样子就不会出现上述的情况了。或者可以传入参数,也可以避免出现这种情况。其实,这个问题也是笔者在写代码的时候没有遵循详细的原则,导致出现这种错误,不过,学习到这个用法,以后就要注意了。

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航