发布于：使用 jQuery 核心

使用 jQuery 的 .index() 函数

.index() 是 jQuery 对象的一个方法，通常用于在调用该方法的 jQuery 对象中搜索特定的元素。此方法有四种具有不同语义的签名，可能会让人感到困惑。本文将详细介绍如何理解 .index() 在每种签名下的工作方式。

link 不带参数的 .index()

1
2
3
4
5
6
7
 
<ul>
    <div></div>
    <li id="foo1">foo</li>
    <li id="bar1">bar</li>
    <li id="baz1">baz</li>
    <div></div>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var foo = $( "#foo1" );
 
console.log( "Index: " + foo.index() ); // 1
 
var listItem = $( "li" );
 
// This implicitly calls .first()
console.log( "Index: " + listItem.index() ); // 1
console.log( "Index: " + listItem.first().index() ); // 1
 
var div = $( "div" );
 
// This implicitly calls .first()
console.log( "Index: " + div.index() ); // 0
console.log( "Index: " + div.first().index() ); // 0

在第一个例子中，.index() 返回 #foo1 在其父元素中基于零的索引值。由于 #foo1 是其父元素的第二个子元素，因此 index() 返回 1。

注意：在 jQuery 1.9 之前，.index() 只能可靠地作用于单个元素，这就是为什么我们在每个示例中都使用了 .first()。在 jQuery 1.9+ 中，这一点可以忽略，因为 API 已更新，明确规定它仅对第一个元素进行操作。

link 带有字符串参数的 .index()

1
2
3
4
5
6
7
8
 
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var foo = $( "li" );
 
// This implicitly calls .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( "div" ) 时，jQuery 会选择文档中所有的 <div> 元素，然后在其中搜索包含调用 .index() 的 jQuery 对象中第一个元素的索引。

link 带有 jQuery 对象参数的 .index()

1
2
3
4
5
6
7
8
 
<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>
1
2
3
4
5
6
7
8
9
10
11
12
 
var foo = $( "li" );
var baz = $( "#baz1" );
 
console.log( "Index: " + foo.index( baz ) ); // 2
 
var tests = $( ".test" );
var bar = $( "#bar1" );
 
// Implicitly calls .first() on the argument.
console.log( "Index: " + tests.index( bar ) ); // 1
 
console.log( "Index: " + tests.index( bar.first() ) ); // 1

在这种情况下，系统会检查传入 .index() 的 jQuery 对象的第一个元素，是否匹配原始 jQuery 对象中的元素。位于 .index() 左侧的原始 jQuery 对象是类数组的，会从索引 0 到 length - 1 进行搜索，以查找参数 jQuery 对象中的第一个元素。

link 带有 DOM 元素参数的 .index()

在这种情况下，系统会检查传入 .index() 的 DOM 元素，是否匹配原始 jQuery 对象中的元素。一旦理解了其他所有情况，这应该是最简单的一种。它与前一种情况非常相似，不同之处在于 DOM 元素是直接传递的，而不是从 jQuery 对象容器中获取的。