Updated April 19, 2023
Definition of jQuery indexOf
The jQuery array indexOf() function is used to returns the index of the first occurrence of a specific element in a given array. The jQuery array indexOf() function is a built-in function in jQuery. The jQuery array indexOf() function searches for the specified element in the given array, if the element found it, then it returns the first occurrence of the element from left, if the element is not found in the array, then it return -1. The search for the element can be started from the specified index or position as well, if the start index is not specified then the search start from the beginning that is 0 index. To start a search from the end we can use the lastIndexOf() function.
Syntax:
array.indexOf(element, startIndex);Parameters:
- element – This is not an optional parameter. It specifies the element which is to search in an array.
- startIndex – This is an optional parameter. It specifies the index value from where the search for the element is to start.
- Return value – The return value of this function is the index value of the specified element.
Working of the JQuery array indexOf() function
The JQuery array indexOf() function accepts two parameters, the first parameter is the element that is to search in the given array, and the second parameter is the index value from where the search started. Suppose we have an array of subjects as “subject = [ “English”, “Hindi”, “Science” ]”, now we need to get the index of “Science” subject. So we can use the array indexOf() function as “subject.indexOf( “Science” )”, which will return 2 as an output that is the index of the “Science” element in the subject array.
Examples
Example of jQuery array indexOf() function to get the index value of the element –
Example #1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array indexOf() function </title>
<style>
#p1 {
color: blue;
}
#p2 {
color: red;
}
</style>
</head>
<body>
<h3> This is an Example for array indexOf() function : </h3>
<button onclick = "checkPosRes()" > Click here to get index of Frank in list. </button>
<button onclick = "checkNegRes()" > Click here to get index of Sham in list. </button>
<br>
<p id = "p1"> </p>
<p id = "p2"> </p>
<script>
var Student = [ "Smith", "Frank", "Reily", "Patel", "John" ];
function checkPosRes()
{
$( "#p1" ).text("The list of Students are : " + Student);
var res = Student.indexOf( "Frank" );
$( "#p2" ).text("The index of Frank is : " + res);
}
function checkNegRes()
{
$( "#p1" ).text("The list of Students are : " + Student);
var res = Student.indexOf( "Sham" );
$( "#p2" ).text("The index of Sham is : " + res);
}
</script>
</body>
</html>An output of the above code is –
Once we click on the first button, the output is –
Once we click on the second button, the output is –
In the above code, the array is created which contains the student names. Next, the indexOf() function is used to get the index of Frank and Sham from the Student array as “Student.indexOf( “Frank” );” and “Student.indexOf( “Sham” );”, for Frank the index value return is 1, and for the Sham, the index value return is -1 because Sham is not present in the array.
Example of jQuery array indexOf() function to get the index of the elements from the given array with the startIndex value for the search –
Example #2
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array indexOf() function </title>
</head>
<body>
<h3> The Example for array indexOf() function : </h3>
<p id = "p1"> </p>
<button onclick = "checkRes()" style = "background-color : green" > Click here to get index of Apple in list. </button>
<br>
<button onclick = "checkPosRes()" style = "background-color : yellow" > Click here to get second index of Banana in list. </button>
<br>
<button onclick = "checkNegRes()" style = "background-color : grey" > Click here to get second index of Blackberry in list. </button>
<br>
<script>
var fruits = [ "Banana", "Blackberry", "Apple", "Orange", "Banana", "Cherry", "Plums" ];
$( "#p1" ).text("The list of Students are : " + fruits);
function checkRes()
{
var res = fruits.indexOf( "Apple", 1 );
alert("The index of Apple is : " + res);
}
function checkPosRes()
{
var res = fruits.indexOf( "Banana", 3 );
alert("The index of Banana is : " + res);
}
function checkNegRes()
{
var res = fruits.indexOf( "Blackberry", 2 );
alert("The index of Blackberry is : " + res);
}
</script>
</body>
</html>An output of the above code is –
Once we click on the first button, the output is –
Once we click on the second button, the output is –
Once we click on the third button, the output is –
In the above code, the array is created which contain some name of the fruits. Next, the array indexOf() function is used to get the index of Apple, Banana, and Blackberry as “fruits.indexOf( “Apple”, 1 );”, “fruits.indexOf( “Banana”, 3 );” and “fruits.indexOf( “Blackberry”, 2 );”. Function return index 2 for the Apple (search start from index 1 to last and between these the Apple is found at index 2), for the Banana return 4 (search start from index 2 to last and in between these the Banana is found at index 4) and for the Blackberry return -1 (search start from index 2 to last and between these the Blackberry is not found at index 2).
Example of jQuery array indexOf() function to get the index of the elements from the given array with the negative startIndex value for the search –
Example #3
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery array indexOf() function </title>
</head>
<body>
<h3> The Example for array indexOf() function : </h3>
<p id = "p1"> </p>
<p id = "p2"> </p>
<p id = "p3"> </p>
<p id = "p4"> </p>
<p id = "p5"> </p>
<br>
<script>
var no = [ 20, 30, 40, 10, 10, 60, 20, 80 ];
$( "#p1" ).text("The list of numbers are : " + no);
var res = no.indexOf( 10, -1 );
$( "#p2" ).text("The indexOf( 10, -1 ) is : " + res);
var res = no.indexOf( 20, -3 );
$( "#p3" ).text("The indexOf( 20, -3 ) is : " + res);
var res = no.indexOf( 20, -5 );
$( "#p4" ).text("The indexOf( 20, -5 ) is : " + res);
var res = no.indexOf( 10, -4 );
$( "#p5" ).text("The indexOf( 10, -4 ) is : " + res);
</script>
</body>
</html>An output of the above code is –
In the above code, the array is created which contains some numbers. Next, the array indexOf() function is used to get the index of some numbers with a negative start index. When we pass the negative startIndex value the searching start at the array’s length plus startIndex value, -1 indicates the last element, -2 indicates the last second element, and so on, as we can see in the above output the search is performing from the index 0 to till array’s length plus specified index.
Conclusion
The jQuery array indexOf() function is a built-in function, which is used to gets the index of the first occurrence of a specific element in a given array.
Recommended Articles
This is a guide to jQuery indexOf. Here we discuss the description, syntax, Working of the JQuery array indexOf() function, and examples with code implementation. You may also have a look at the following articles to learn more –
