你的位置:首页 > Java教程

[Java教程]Jquery中index()问题


对于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> <div id="foo">foo</div>//(仅仅是假设,不推荐使用这种方法) <li id="bar">bar</li> <li id="baz">baz</li></ul>

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