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')中后者的方法。这样子就不会出现上述的情况了。或者可以传入参数，也可以避免出现这种情况。其实，这个问题也是笔者在写代码的时候没有遵循详细的原则，导致出现这种错误，不过，学习到这个用法，以后就要注意了。