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" );
 
// 隐式呼叫 .first() 方法
console.log( "Index: " + listItem.index() ); // 1
console.log( "Index: " + listItem.first().index() ); // 1
 
var div = $( "div" );
 
// 隐式呼叫 .first() 方法
console.log( "Index: " + div.index() ); // 0
console.log( "Index: " + div.first().index() ); // 0

上方示例中，.index() 返回基于0的索引，#foo1 是父容器中的第二个子元素，所以返回值为：1。

注意：在 jQuery 1.9 之前，.index() 只工作于单独确定的元素，所以在呼叫前，需要使用 .first() 来确定单独的元素；jQuery 1.9 之后可以忽略。

字符串参数 .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 将会在原始的 jQuery 对象上隐式的呼叫 .first() 方法，将会找到第一个元素。

其次，jQuery 会使用传入的字符串选择器来查询整个的 DOM，然后在新的查询结果集中来检索索引。

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

上方代码案例中，jQuery 对象集中的第一个元素被传入 .index() 方法，之后检索该传入元素在 jQuery 对象集中的索引值。

DOM 元素参数 .index()

功能形式同 jQuery 对象参数的 .index() 方式。