jquery gets element index value index() example_jquery

jquery gets the element index value index() method:

jquery’s index() method searches for matching elements and returns the index value of the corresponding element, counting from 0.

If no parameters are passed to the .index() method, the return value is the position of the first element in this collection of jQuery objects relative to its sibling elements.
If the parameter is a set of DOM elements or jQuery objects, the return value is the position of the passed element relative to the original set.
If the parameter is a selector, the return value is the position of the original element relative to the element matched by the selector. If no matching element is found, -1 is returned.

Copy code The code is as follows:

<ul>
<li id= "foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
&lt ;/ul>

$('li').index(document.getElementById('bar')); //1, pass a DOM object and return the index position of this object in the original collection
$('li').index($('#bar')); //1, pass a jQuery object
$('li').index($('li:gt(0)') ); //1, pass a set of jQuery objects and return the index position of the first element in the object in the original collection
$('#bar').index('li'); //1, pass A selector that returns the index position of #bar in all li
$('#bar').index(); //1, without passing parameters, returns the index position of this element among its peers.

jquery to get element index value index() example

Copy code The code is as follows:

//For second or third level linkage

<div id="nav">
<a href="http://www.51xuediannao.com /">Website building materials</a>
<a href="http://www.51xuediannao.com/">jquery special effects</a>
<a href="http ://www.51xuediannao.com/">Lazy host</a>
<a href="http://www.51xuediannao.com/qd63/">Front-end road</a> ;
</div>

$("#nav a").click(function(){

//Four classic usages
var index1 = $ ("#nav a").index(this);
var index2 = $("#nav a").index($(this));
var index3 = $(this).index()
var index3 = $(this).index("a")
alert(index3);
return false;
});