# .index()

## index ( ) Returns: Number version added: 1.4

## index ( selector ) Returns: Number version added: 1.4

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

## index ( element ) Returns: Number version added: 1.0

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

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

#### 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:

    <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:

    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:

    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.

    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.

    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:

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

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

`Index: 1`

## Examples:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        background: yellow;
        margin: 5px;
      }
      span {
        color: red;
      }

      </style>

      <script src="//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:

#### Example: Returns the index for the element with ID bar.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        font-weight: bold;
        color: #090;
      }

      </style>

      <script src="//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:

#### Example: Returns the index for the first item in the jQuery collection.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        font-weight: bold;
        color: #090;
      }

      </style>

      <script src="//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:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        font-weight: bold;
        color: #090;
      }

      </style>

      <script src="//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:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        font-weight: bold;
        color: #090;
      }

      </style>

      <script src="//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:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <style>

      div {
        font-weight: bold;
        color: #090;
      }

      </style>

      <script src="//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: