# .index()

所属分类：杂项 > DOM 元素方法 英文文档：.index()

## .index()返回: Number

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

- #### 添加的版本: 1.4.index()

  - 这个方法不接受任何参数。

- #### 添加的版本: 1.4.index( selector )

  - selector
    类型: Selector
    一个选择器，代表一个jQuery对象，将会从这个对象中查找元素。

- #### 添加的版本: 1.0.index( element )

  - element
    类型: Element, jQuery
    将要用于查找的DOM元素，或者jQuery对象中的第一个元素。

#### Return Values（返回值）

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

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

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

#### Detail（细节）

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

1 2 3 4 5 |
    <ul>  <li id="foo">foo</li>  <li id="bar">bar</li>  <li id="baz">baz</li></ul>

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

1 2 3 |
    var listItem = document.getElementById('bar');alert('Index: ' + $('li').index(listItem));We get back the zero-based position of the list item:

Index: 1

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

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

我们就能得到这个li所在的位置，从0开始计数的：

Index: 1

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

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

我们得到了匹配的li集合中，第一个元素的位置，从0开始计数。

Index: 1

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

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

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

Index: 1

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

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

又一次，我们得到了这个li从0开始数的位置。

Index: 1

## 例子:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
    <!DOCTYPE html><html><head>  <style>div { background:yellow; margin:5px; }span { color:red; }</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
    <!DOCTYPE html><html><head>  <style>div { font-weight: bold; color: #090; }</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 返回jQuery集合中第一项的索引值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
    <!DOCTYPE html><html><head>  <style>div { font-weight: bold; color: #090; }</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
    <!DOCTYPE html><html><head>  <style>div { font-weight: bold; color: #090; }</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 返回ID为bar的元素相对于同辈的索引值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
    <!DOCTYPE html><html><head>  <style>div { font-weight: bold; color: #090; }</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo:

#### Example: 由于没有元素的ID为foobar，所以返回 -1。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
    <!DOCTYPE html><html><head>  <style>div { font-weight: bold; color: #090; }</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo: