JQuery官方学习资料（译）：使用JQuery的.index()方法

    .index()是一个JQuery对象方法，一般用于搜索JQuery对象上一个给定的元素。该方法有四种不同的函数签名，接下来将讲解这四种函数签名的具体用法。

 

• 无参数的.index()

<ul>

<div></div>

<li id="foo1">foo</li>

<li id="bar1">bar</li>

<li id="baz1">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()。

 

• 一个字符串作为参数的.index()

<ul>

<div class="test"></div>

<li id="foo1">foo</li>

<li id="bar1" class="test">bar</li>

<li id="baz1">baz</li>

<div class="test"></div>

</ul>

<div id="last"></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元素中的第一个元素。

 

• 一个JQuery对象作为参数的.index()

<ul>

<div class="test"></div>

<li id="foo1">foo</li>

<li id="bar1" class="test">bar</li>

<li id="baz1">baz</li>

<div class="test"></div>

</ul>

<div id="last"></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()

    这种情况下，将会传入一个DOM元素到.index()中，并检查其在原JQuery对象元素集合中的序号。