Hello Readers,
Jquery .index() method generally used to search for a define element within the jQuery object which it is called on. Jquery .index() method has 4 different signatures with different semantics which can be confusing. In this article we will cover details about how to understand the way Jquery .index() method works with each signature.
4 different signatures: jQuery have four different signature which is as follows:
jQuery .index() with No Arguments
jQuery .index() with a String Argument
jQuery .index() with a jQuery Object Argument
jQuery .index() with a DOM Element Argument
Example 1:jQuery .index() with No Arguments.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var click = $( "#click" );
console.log( "Index: " + click.index() ); // 1
var listItem = $( "li" );
// This implicitly calls .first()
console.log( "Index: " + listItem.index() ); // 1
console.log( "Index: " + listItem.first().index() ); // 1
var div = $( "div" );
// This implicitly calls .first()
console.log( "Index: " + div.index() ); // 0
console.log( "Index: " + div.first().index() ); // 0
});
</script>
</head>
<body>
<p>Click the button to get the index of the selected element with id="CHOOSE", relative to the jQuery selector (class="hot"):</p>
<button>Get index</button>
<ul>
<div></div>
<li id="click">Click</li>
<li id="clickSet">bar</li>
<li id="clickFet">baz</li>
<div></div>
</ul>
</body>
</html>
In above example we use jquery index() method using without argument.
Example 2: jQuery .index() with a String Argument:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var foo = $( "li" );
// This implicitly calls .first()
console.log( "Index: " + foo.index( "li" ) ); // 0
console.log( "Index: " + foo.first().index( "li" ) ); // 0
var baz = $( "#baz1" );
console.log( "Index: " + baz.index( "li" )); // 2
var listItem = $( "#bar1" );
console.log( "Index: " + listItem.index( ".test" ) ); // 1
var div = $( "#last" );
console.log( "Index: " + div.index( "div" ) ); // 2
});
</script>
</head>
<body>
<p>Click the button to get the index of the selected element with id="CHOOSE", relative to the jQuery selector (class="hot"):</p>
<button>Get index</button>
<ul>
<div class="test"></div>
<li id="foo1">foo</li>
<li id="bar1" class="test">bar</li>
<li id="baz1">baz</li>
<div class="test"></div>
</ul>
<div id="last"></div>
</body>
</html>
Example 3: jQuery .index() with a jQuery Object Argument.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var foo = $( "li" );
var baz = $( "#baz1" );
console.log( "Index: " + foo.index( baz ) ); // 2
var tests = $( ".test" );
var bar = $( "#bar1" );
// Implicitly calls .first() on the argument.
console.log( "Index: " + tests.index( bar ) ); // 1
console.log( "Index: " + tests.index( bar.first() ) ); // 1
});
</script>
</head>
<body>
<ul>
<div class="test"></div>
<li id="foo1">foo</li>
<li id="bar1" class="test">bar</li>
<li id="baz1">baz</li>
<div class="test"></div>
</ul>
<div id="last"></div>
</body>
</html>
Example 4: jQuery .index() with a DOM Element Argument
In this case, the DOM element that's passed into .index() is being checked against all of the elements in the original jQuery object. Once all other cases are understood, this should be the simplest case. It is very similar to the previous case, except since the DOM element is passed directly, it is not taken from a jQuery object container.
Thanks
0 Comment(s)