{"name":"index","type":"method","title":".index()","deprecated":null,"removed":null,"desc":"Search for a given element from among the matched elements.","categories":["miscellaneous/dom-element-methods","version/1.0","version/1.4"],"entries":[{"return":"Number","signatures":[{"added":"1.4"},{"added":"1.4","argument":{"desc":"A selector representing a jQuery collection in which to look for an element.","name":"selector","type":"Selector"}},{"added":"1.0","argument":{"desc":"The DOM element or first element within the jQuery object to look for.","type":[{"name":"Element"},{"name":"jQuery"}],"name":"element"}}],"examples":[{"desc":"On click, returns the index (zero-based) of that div in the page.","code":"\n$( \"div\" ).click(function() {\n  // `this` is the DOM element that was clicked\n  var index = $( \"div\" ).index( this );\n  $( \"span\" ).text( \"That was div index #\" + index );\n});\n","css":"\n  div {\n    background: yellow;\n    margin: 5px;\n  }\n  span {\n    color: red;\n  }\n","html":"\n<span>Click a div!</span>\n<div>First div</div>\n<div>Second div</div>\n<div>Third div</div>\n"},{"desc":"Returns the index for the element with ID bar.","css":"\n  div {\n    font-weight: bold;\n    color: #090;\n  }\n","code":"\nvar listItem = $( \"#bar\" );\n$( \"div\" ).html( \"Index: \" + $( \"li\" ).index( listItem ) );\n","html":"\n<ul>\n  <li id=\"foo\">foo</li>\n  <li id=\"bar\">bar</li>\n  <li id=\"baz\">baz</li>\n</ul>\n<div></div>\n"},{"desc":"Returns the index for the first item in the jQuery collection.","css":"\n  div {\n    font-weight: bold;\n    color: #090;\n  }\n","code":"\nvar listItems = $( \"li:gt(0)\" );\n$( \"div\" ).html( \"Index: \" + $( \"li\" ).index( listItems ) );\n","html":"\n<ul>\n  <li id=\"foo\">foo</li>\n  <li id=\"bar\">bar</li>\n  <li id=\"baz\">baz</li>\n</ul>\n<div></div>\n"},{"desc":"Returns the index for the element with ID bar in relation to all <li> elements.","css":"\n  div {\n    font-weight: bold;\n    color: #090;\n  }\n","code":"\n$( \"div\" ).html( \"Index: \" +  $( \"#bar\" ).index( \"li\" ) );\n","html":"\n<ul>\n  <li id=\"foo\">foo</li>\n  <li id=\"bar\">bar</li>\n  <li id=\"baz\">baz</li>\n</ul>\n<div></div>\n"},{"desc":"Returns the index for the element with ID bar in relation to its siblings.","css":"\n  div {\n    font-weight: bold;\n    color: #090;\n  }\n","code":"\nvar barIndex = $( \"#bar\" ).index();\n$( \"div\" ).html( \"Index: \" +  barIndex );\n","html":"\n<ul>\n  <li id=\"foo\">foo</li>\n  <li id=\"bar\">bar</li>\n  <li id=\"baz\">baz</li>\n</ul>\n<div></div>\n"},{"desc":"Returns -1, as there is no element with ID foobar.","css":"\n  div {\n    font-weight: bold;\n    color: #090;\n  }\n","code":"\nvar foobar = $( \"li\" ).index( $( \"#foobar\" ) );\n$( \"div\" ).html( \"Index: \" + foobar );\n","html":"\n<ul>\n  <li id=\"foo\">foo</li>\n  <li id=\"bar\">bar</li>\n  <li id=\"baz\">baz</li>\n</ul>\n<div></div>\n"}],"longdesc":"\n    <h4>Return Values</h4>\n    <p>If no argument is passed to the <code>.index()</code> method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.</p>\n    <p>If <code>.index()</code> is called on a collection of elements and a DOM element or jQuery object is passed in, <code>.index()</code> returns an integer indicating the position of the passed element relative to the original collection.</p>\n    <p>If a selector string is passed as an argument, <code>.index()</code> 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, <code>.index()</code> will return -1.</p>\n    <h4>Detail</h4>\n    <p>The complementary operation to <code>.get()</code>, which accepts an index and returns a DOM node, <code>.index()</code> can take a DOM node and returns an index. Suppose we have a simple unordered list on the page:</p>\n    <pre><code>\n&lt;ul&gt;\n  &lt;li id=\"foo\"&gt;foo&lt;/li&gt;\n  &lt;li id=\"bar\"&gt;bar&lt;/li&gt;\n  &lt;li id=\"baz\"&gt;baz&lt;/li&gt;\n&lt;/ul&gt;\n    </code></pre>\n    <p>If we retrieve one of the three list items (for example, through a DOM function or as the context to an event handler), <code>.index()</code> can search for this list item within the set of matched elements:</p>\n    <pre><code>\nvar listItem = document.getElementById( \"bar\" );\nalert( \"Index: \" + $( \"li\" ).index( listItem ) );\n    </code></pre>\n    <p>We get back the zero-based position of the list item:</p>\n    <p>\n      <samp>Index: 1</samp>\n    </p>\n    <p>Similarly, if we retrieve a jQuery object consisting of one of the three list items, <code>.index()</code> will search for that list item:</p>\n    <pre><code>\nvar listItem = $( \"#bar\" );\nalert( \"Index: \" + $( \"li\" ).index( listItem ) );\n    </code></pre>\n    <p>We get back the zero-based position of the list item:</p>\n    <p>\n      <samp>Index: 1</samp>\n    </p>\n    <p>Note that if the jQuery collection used as the <code>.index()</code> method's argument contains more than one element, the first element within the matched set of elements will be used.</p>\n    <pre><code>\nvar listItems = $( \"li:gt(0)\" );\nalert( \"Index: \" + $( \"li\" ).index( listItems ) );\n    </code></pre>\n    <p>We get back the zero-based position of the first list item within the matched set:</p>\n    <p>\n      <samp>Index: 1</samp>\n    </p>\n    <p>If we use a string as the <code>.index()</code> 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.</p>\n    <pre><code>\nvar listItem = $( \"#bar\" );\nalert( \"Index: \" + listItem.index( \"li\" ) );\n    </code></pre>\n    <p>We get back the zero-based position of the list item:</p>\n    <p>\n      <samp>Index: 1</samp>\n    </p>\n    <p>If we omit the argument, <code>.index()</code> will return the position of the first element within the set of matched elements in relation to its siblings:</p>\n    <pre><code>\nalert( \"Index: \" + $( \"#bar\" ).index() );\n    </code></pre>\n    <p>Again, we get back the zero-based position of the list item:</p>\n    <p>\n      <samp>Index: 1</samp>\n    </p>\n  "}]}