## .index()Returns: Integer

Description: Search for a given element from among the matched elements.

- #### version added: 1.4.index()

  - This signature does not accept any arguments.

- #### version added: 1.4.index( selector )

  - selector
    Type: Selector
    A selector representing a jQuery collection in which to look for an element.

- #### version added: 1.0.index( element )

  - element
    Type: Element or jQuery
    The DOM element or first element within the jQuery object to look for.

#### Return Values

If no argument is passed to the `.index()` method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

If `.index()` is called on a collection of elements and a DOM element or jQuery object is passed in, `.index()` returns an integer indicating the position of the passed element relative to the original collection.

If a selector string is passed as an argument, `.index()` returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, `.index()` will return -1.

#### Detail

The complementary operation to `.get()`, which accepts an index and returns a DOM node, `.index()` can take a DOM node and returns an index. Suppose we have a simple unordered list on the page:

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

If we retrieve one of the three list items (for example, through a DOM function or as the context to an event handler), `.index()` can search for this list item within the set of matched elements:

1 2 |
    var listItem = document.getElementById( "bar" );alert( "Index: " + $( "li" ).index( listItem ) );

We get back the zero-based position of the list item:

`Index: 1`

Similarly, if we retrieve a jQuery object consisting of one of the three list items, `.index()` will search for that list item:

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

We get back the zero-based position of the list item:

`Index: 1`

Note that if the jQuery collection used as the `.index()` method's argument contains more than one element, the first element within the matched set of elements will be used.

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

We get back the zero-based position of the first list item within the matched set:

`Index: 1`

If we use a string as the `.index()` method's argument, it is interpreted as a jQuery selector string. The first element among the object's matched elements which also matches this selector is located.

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

We get back the zero-based position of the list item:

`Index: 1`

If we omit the argument, `.index()` will return the position of the first element within the set of matched elements in relation to its siblings:

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

Again, we get back the zero-based position of the list item:

`Index: 1`

## Examples:

On click, returns the index (zero-based) of that div in the page.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>index demo</title>  <style>  div {    background: yellow;    margin: 5px;  }  span {    color: red;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.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 that was clicked  var index = $( "div" ).index( this );  $( "span" ).text( "That was div index #" + index );});</script> </body></html>

#### Demo:

Returns the index for the element with ID bar.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>index demo</title>  <style>  div {    font-weight: bold;    color: #090;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.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:

Returns the index for the first item in the jQuery collection.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>index demo</title>  <style>  div {    font-weight: bold;    color: #090;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.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:

Returns the index for the element with ID bar in relation to all <li> elements.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>index demo</title>  <style>  div {    font-weight: bold;    color: #090;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.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:

Returns the index for the element with ID bar in relation to its siblings.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>index demo</title>  <style>  div {    font-weight: bold;    color: #090;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.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:

Returns -1, as there is no element with ID foobar.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>index demo</title>  <style>  div {    font-weight: bold;    color: #090;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.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: