发布在：使用 jQuery Core

使用 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> 元素，然后搜索包含 jQuery 对象中第一个元素的索引，即调用 .index()。

链接 带 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 对象的第一个元素。

链接 带 DOM 元素参数的 .index()

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