# .index()

Categories: Miscellaneous > DOM Element Methods

## .index( ) Returns: Number

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

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

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

  selectorA selector representing a jQuery collection in which to look for an element.

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

  elementThe 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 original element 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 (based zero) of that div in the page.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
    div { background:yellow; margin:5px; }
    span { color:red; }
    </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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: Returns the index for the element with ID bar.

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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>
    <head>
      <style>div { font-weight: bold; color: #090; }</style>
      <script src="http://code.jquery.com/jquery-1.7rc2.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: