<pclass="arguement"><strong>selector</strong>A selector representing a jQuery collection in which to look for an element.</p>
</li>
<liclass="signature"id="index-element">
<h4class="name">
<spanclass="versionAdded">version added: <ahref="/category/version/1.0/">1.0</a></span>.index( element )</h4>
<pclass="arguement"><strong>element</strong>The DOM element or first element within the jQuery object to look for.</p>
</li>
</ul>
<divclass="longdesc">
<h4>Return Values</h4>
<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>
<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>
<p>If a selector string is passed as an argument, <code>.index()</code> returns an integer indicating the position of the original element relative to the elements matched by the selector. If the element is not found, <code>.index()</code> will return -1.</p>
<h4>Detail</h4>
<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>
<pre>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
</pre>
<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>
<pre>
var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));
We get back the zero-based position of the list item:
</pre>
<p><spanclass="output">Index: 1</span></p>
<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>
<pre>
var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));
</pre>
<p>We get back the zero-based position of the list item:</p>
<p><spanclass="output">Index: 1</span></p>
<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>
<pre>
var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));
</pre>
<p>We get back the zero-based position of the first list item within the matched set:</p>
<p><spanclass="output">Index: 1</span></p>
<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>
<pre>
var listItem = $('#bar');
alert('Index: ' + listItem.index('li'));
</pre>
<p>We get back the zero-based position of the list item:</p>
<p><spanclass="output">Index: 1</span></p>
<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>
<pre>alert('Index: ' + $('#bar').index();</pre>
<p>Again, we get back the zero-based position of the list item:</p>
<p><spanclass="output">Index: 1</span></p>
</div>
<h3>Examples:</h3>
<divid="entry-examples"class="entry-examples">
<divid="example-0">
<h4>Example: <spanclass="desc">On click, returns the index (based zero) of that div in the page.</span>
