.index()S2C Home « DOM Element Methods « .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 |
|---|---|---|
element | The DOM element or first element of that type within the jQuery object to look for. | Element |
selector | A 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() ExampleTop
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 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.');
});
});
.index( element ) ExamplesTop
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 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.');
});
});
.index( selector ) ExampleTop
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 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.');
});
});