.index()是一个JQuery对象方法，一般用于搜索JQuery对象上一个给定的元素。该方法有四种不同的函数签名，接下来将讲解这四种函数签名的具体用法。
<ul>
<div></div>
<li >foo</li>
<li >bar</li>
<li >baz</li>
<div></div>
</ul>
var $foo = $( "#foo1" );
console.log( "Index: " + $foo.index() ); // 1
var $listItem = $( "li" );
// 隐式调用.last()
console.log( "Index: " + $listItem.index() ); // 3
console.log( "Index: " + $listItem.last().index() ); // 3
var $div = $( "div" );
console.log( "Index: " + $div.index() ); // 4
console.log( "Index: " + $div.last().index() ); // 4
|
在第一个例子中，.index()给出的是#foo1在其父节点内的序号（从0开始），由于它是其父节点中的第二个元素所以返回的是1。
当一个JQuery对象调用.index()时，如果它包含了多个元素，那么不会计算其中第一个元素的序号，而是计算其中最后一个元素的序号，这相当于总是调用$jqObject.last().index()。
<ul>
<div class="test"></div>
<li >foo</li>
<li class="test">bar</li>
<li >baz</li>
<div class="test"></div>
</ul>
<div ></div>
var $foo = $( "li" );
// 隐式调用.first()
console.log( "Index: " + $foo.index( "li" ) ); // 0
console.log( "Index: " + $foo.first().index( "li" ) ); // 0
var $baz = $( "#baz1" );
console.log( "Index: " + $baz.index( "li" )); // 2
var $listItem = $( "#bar1" );
console.log( "Index: " + $listItem.index( ".test" ) ); // 1
var $div = $( "#last" );
console.log( "Index: " + $div.index( "div" ) ); // 2
|
当传入一个字符串作为参数来调用.index()时，有两个情况需要注意。
第一，JQuery对象将隐式调用.first()，因此它将获取第一个元素的序号，而非最后一个元素。
第二，JQuery对象是根据字符串选择器查询整个DOM，并且检测其在这个字符串选择器元素集合中的序号。
例如，使用.index( "div" )的时候，选择的是整个文档中的所有div元素中的第一个元素。
<ul>
<div class="test"></div>
<li >foo</li>
<li class="test">bar</li>
<li >baz</li>
<div class="test"></div>
</ul>
<div ></div>
var $foo = $( "li" );
var $baz = $( "#baz1" );
console.log( "Index: " + $foo.index( $baz ) ); // 2
var $tests = $( ".test" );
var $bar = $( "#bar1" );
// 隐式调用参数的.first()
console.log( "Index: " + $tests.index( $bar ) ); // 1
console.log( "Index: " + $tests.index( $bar.first() ) ); // 1
|
这种情况下，将会检查传入.index()的JQuery对象的第一个元素在原JQuery对象元素中的序号，这个原JQuery对象就是.index()左侧的那个JQuery对象。
这种情况下，将会传入一个DOM元素到.index()中，并检查其在原JQuery对象元素集合中的序号。