返回值:Numberindex()

从匹配的元素中搜索给定元素的索引值。索引值从 0 开始计数。

返回值

如果不向 .index() 方法传递任何参数，则返回值就是 jQuery 对象中第一个元素相对于它的兄弟元素的位置。

如果在一组元素上调用 .index() 方法，并且参数是一个 DOM 元素或是 jQuery 对象，.index() 返回值就是传入的元素相对于原先集合的位置。

如果参数是一个选择器，.index() 返回值就是原先的元素相对于选择器匹配到的元素的位置。如果找不到匹配的元素，.index() 返回 -1。

细节

.get() 接受一个索引值参数并返回对应的 DOM 节点。.index() 与其正好相反，接受一个 DOM 节点，然后返回其索引值。假设页面上有一个简单的无序列表： 

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

如果我们获取了三个列表项中的一个元素（例如，通过 DOM 函数，或者事件处理函数中的上下文 this），.index() 能够在匹配的元素中找到这个列表项： 

var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));

我们就能得到这个列表项所在的位置（从 0 开始计数）：

Index: 1

类似的，如果我们获得了一个 jQuery 对象，该对象是这三个列表项之一，那么 .index() 也能用于搜索那个列表项： 

var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));

我们同样能得到这个列表项所在的位置（从 0 开始计数）：

Index: 1

注意，如果作为 .index() 参数的 jQuery 集合含有多个元素，那么只有第一个元素会被使用： 

var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));

于是，我们得到了匹配的列表项集合中，第一个元素的位置（从 0 开始计数）：

Index: 1

如果我们将一个字符串传递给 .index() 方法，这个字符串会被解析成 jQuery 选择器，将会定位到调用 .index() 的 jQuery 对象中的第一个元素相对于由这个选择器匹配到的元素集合中的位置： 

var listItem = $('#bar');
alert('Index: ' + listItem.index('li'));

我们能得到这个列表项所在的位置（从 0 开始计数）：

Index: 1

如果我们忽略参数，.index() 将返回集合中第一个元素相对于其兄弟元素的位置： 

alert('Index: ' + $('#bar').index();

我们又一次得到了这个列表项从 0 开始计数的位置：

Index: 1

示例:

点击后，返回那个 div 在页面上的索引值(从 0 开始计数)。

<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
<script src="jquery.min.js"></script>
</head>
<body>

<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>

<script>


$("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});


</script>
</body>
</html>

演示:

示例:

返回 ID 为 bar 的元素的索引值。

<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="jquery.min.js"></script>
</head>
<body>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>

<script>

var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );

</script>
</body>
</html>

演示:

示例:

返回 jQuery 集合中第二个列表项的索引值。

<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="jquery.min.js"></script>
</head>
<body>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>

<script>

var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );


</script>
</body>
</html>

演示:

示例:

返回 ID 为 bar 的元素相对于所有 <li> 元素的索引值。

<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="jquery.min.js"></script>
</head>
<body>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>

<script>

$('div').html('Index: ' +  $('#bar').index('li') );

</script>
</body>
</html>

演示:

示例:

返回 ID 为 bar 的元素相对于它的兄弟元素的索引值。

<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="jquery.min.js"></script>
</head>
<body>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>

<script>

var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );

</script>
</body>
</html>

演示:

示例:

由于没有元素的 ID 是 foobar，所以返回 -1。

<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="jquery.min.js"></script>
</head>
<body>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>

<script>

var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);

</script>
</body>
</html>

演示: