.index() JQ Home  <<  D.E.M.  <<  .index()

DOM element retrieval.

Description

The .index() method is used to search for a specified element within the matched elements.

Syntax

Signature Description
.index()Search for first element within the matched set.
.index( element )Search for an element within the matched set.
.index( selector )Search for an element within the jQuery collection.

Parameters

Parameter Description Type
elementThe DOM element or first element of that type within the jQuery object to look for.Element
selectorA string representing a jQuery collection in which to look for the first element matching the specified selector.Selector

Return

A JavaScript Number object as described in the table below.

Signature Return Description
.index()Retrieve the position of the first element within the jQuery object relative to its sibling elements.
.index( element )Retrieve the position of the first element of the passed element type relative to the original collection.
.index( selector )Retrieve the position of the original element relative to the elements matched by the selector.

.index() Example D.E.M.  <<  Top

Search for first element within the matched set.

In the example below when the button is pressed we select the first 'td' element in the table below with a class of 'tdclass' and then alert its index position.

Table For Testing The .index() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2 (class of tdclass)
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn8').on('click', function() {
    var $a = $('.testtable tr .tdclass').index();
    alert('The td element with a class of 'tdclass' has an index position of: ' 
           + $a + ' within our matched set, relative to its siblings.');
  });
});

Press the button below to action the above code:

.index( element ) ExamplesD.E.M.  <<  Top

Search for an element within the matched set.

This signature of the .index() method which accepts a DOM node and returns an index is the inverse of the .get( index ) signature of the .get() method which accepts an index and returns a DOM node.

In the example below when the left button is pressed we use a DOM function to extract the 'td' element with an id of 'tdid' to a local variable. We can then retrieve its index position within our matched set.

When the right button is pressed we extract a jQuery object of the 'td' element with an id of 'tdid2' to a local variable. We can then retrieve its index position within our matched set.

Table For Testing The .index( element ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2 (id of tdid)
Table Row 4, Table Data 1 Table Row 4, Table Data 2 (id of tdid2) 


$(function(){
  $('#btn9').on('click', function() {
    var $trNode = document.getElementById('tdid');
    alert('The td element with an id of 'tdid' has an index position of: ' 
          +  $('.testtable2 tr td').index($trNode) 
          + ' within our matched set, relative to its siblings.');
  });
  
  $('#btn10').on('click', function() {
    var $trNode = $('#tdid2');
    alert('The td element with an id of tdid2 has an index position of: ' 
          +  $('.testtable2 tr td').index($trNode) 
          + ' within our matched set, relative to its siblings.');
  });
});

Press the button below to action the above code:

                    

.index( selector ) Example D.E.M.  <<  Top

Search for an element within the jQuery collection.

In the example below when the button is pressed we select the 'td' element in the table below with an id of 'tdid3' and then alert its index position using a selector.

Table For Testing The .index( selector ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2 (id of tdid3)
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn11').on('click', function() {
    var $trNode = $('#tdid3');
    alert('The td element with an id of tdid3 has an index position of: ' 
          +  $trNode.index('.testtable3 tr td') 
          + ' within our matched set, relative to its siblings.');
  });
});

Press the button below to action the above code:

Related Tutorials

jQuery Basic Tutorials - Lesson 5 - DOM Element Methods