index()

Returns: Number

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

Arguments

.index()

version added: 1.4

.index(selector)

Selector

version added: 1.4

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

.index(element)

Element

version added: 1.0

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

The output of the code above will be:

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));

The output of the code above will be:

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));

The output of the code above will be:

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'));

The output of the code above will be:

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

The output of the code above will be:

Index: 1

Examples

Example 1

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

$("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
});

The output of the code above will be:

Try it yourself

Example 1 - Full source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

  <style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
   <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
 $("div").click(function () {
  // this is the dom element clicked
  var index = $("div").index(this);
  $("span").text("That was div index #" + index);
 });
});

</script>
</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>

<div>Third div</div>
</body>
</html>

Try it yourself

Example 2

Returns the index for the element with ID bar.

    var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );

The output of the code above will be:

Try it yourself

Example 2 - Full source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
    var listItem = $('#bar');
    $('div').html( 'Index: ' + $('li').index(listItem) );
});

</script>
</head>

<body>
<ul>

  <li id="foo">foo</li>
  <li id="bar">bar</li>

  <li id="baz">baz</li>
</ul>

<div></div>
</body>
</html>

Try it yourself

Example 3

Returns the index for the first item in the jQuery collection.

var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );

The output of the code above will be:

Try it yourself

Example 3 - Full source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">

$(document).ready(function(){
var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );
});

</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>

  <li id="bar">bar</li>

  <li id="baz">baz</li>
</ul>
<div></div>
</body>

</html>

Try it yourself

Example 4

Returns the index for the element with ID bar in relation to all 'li' elements.

$('div').html('Index: ' +  $('#bar').index('li') );

The output of the code above will be:

Try it yourself

Example 4 - Full source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function(){
$('div').html('Index: ' +  $('#bar').index('li') );
});

</script>
</head>
<body>

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

Try it yourself

Example 5

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

var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );

The output of the code above will be:

Try it yourself

Example 5 - Full source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var barIndex = $('#bar').index();
$('div').html( 'Index: ' +  barIndex );
});
</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>
</html>

Try it yourself

Example 6

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

var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);

The output of the code above will be:

Try it yourself

Example 6 - Full source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style>div { font-weight: bold; color: #090; }</style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);
});
</script>
</head>
<body>
<ul>
  <li id="foo">foo</li>

  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
<div></div>
</body>

</html>

Try it yourself

Was this information helpful?

Yes No

index()

index()

Arguments

Return Values

Detail

Examples

Example 1

Example 2

Example 3

Example 4

Example 5

Example 6

Comments