.index()

jQuery

previous page next page

.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()

    • This method 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
3
 
                                

                                  

                                    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:

Example: On click, returns the index (based zero) 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
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                      div { background:yellow; margin:5px; }
                                    

                                  

                                  

                                    

                                      span { color:red; }
                                    

                                  

                                  

                                    

                                      
                                        </style>
                                      
                                    

                                  

                                  

                                    

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

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

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>div { font-weight: bold; color: #090; }</style>
                                    

                                  

                                  

                                    

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

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

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>div { font-weight: bold; color: #090; }</style>
                                    

                                  

                                  

                                    

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

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

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>div { font-weight: bold; color: #090; }</style>
                                    

                                  

                                  

                                    

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

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

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>div { font-weight: bold; color: #090; }</style>
                                    

                                  

                                  

                                    

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

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

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>div { font-weight: bold; color: #090; }</style>
                                    

                                  

                                  

                                    

                                        <script src="http://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>
 POWERED BYHERONOTE
previous page start next page