Updated March 29, 2023
Introduction to jquery array contains
The jQuery array contains a method to check required information is available or not. This method verifies the “required to contain data” in the array using jQuery technology.
The contains is a selector to select or specify a required value in the array data. This array does not change original array values.
The contains is a method to find specific values from the array. If the array stores multiple similar values, then contain operator displays the first value. This array contains operator starts from 0 indexes in the array list.
jQuery array contains overviews
- jQuery array contains operator displays required value in the array using index position.
- If the value is available in the array, then the jQuery array contains a method that displays the index position of the expected value.
- If the value does not become available in the array, then the method displays the “-1” value.
- If a similar value is available in the array, then the method returns the first value’s index position and ignore other value.
- Contains method checks value is available or not in the Boolean form.
jQuery array contains method
- There are two methods available to check contains value using jQuery.
- First method of the contains operator use the “jQuery.inArray()” with values.
jQuery.inArray(required_value, array_object);
- Here, you can create an array using a variable or object.
- Place this object in the method with the required value.
- Check whether the value is available or not.
- Second method of the contains operator use the “jQuery.inArray()” with values.
jQuery.inArray(required_value, array[value1, value2, …, valueN]);- Here, you can create an array in the contains method.
- You can place the required value and array in the method simultaneously.
- Check whether the required value is available or not.
Contains code
- The first method of the contains operator uses in the below code.
var array_name = [value1, value2, value3, value4, value5];
var $variable_name = "value1";
jQuery.inArray(variable_name, array_name) );- The second method contains operator uses in the below code.
var array_name = [value1, value2, value3, value4, value5];
jQuery.inArray("value" , array_name]) );- This code helps to find the required value’s position from the array.
JQuery array contains examples
Example: the contains method with simple character examples and output shown below.
<!DOCTYPE HTML>
<html>
<head>
<title> jQuery method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"> </script>
</head>
<body>
<h3> jQuery array contains method </h3>
<p id = "jc1"> </p>
<p id = "jc2"> </p>
<button id = "bt"> CLICK HERE </button>
<p id = "jc3"> </p>
<script>
var array_value = ["X", "A", "Y", "B", "Z", "C", "Y", "D"];
var req_val = "Y";
document.getElementById("jc1").innerHTML = " Given array : [" + array_value + "]";
document.getElementById("jc2").innerHTML = " Given Value to be searched: " + req_val;
$("#bt").click(function(){
document.getElementById("jc3").innerHTML = " <b> Value contains at position: </b> " + $.inArray(req_val, array_value);
});
</script>
</body>
</html>Output before click button
Output after click button
Example: the contains method with uppercase and lowercase characters’ examples and the output shown below.
<!DOCTYPE HTML>
<html>
<head>
<title> jQuery method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"> </script>
</head>
<body>
<h3> jQuery array contains method </h3>
<p id = "jc1"> </p>
<p id = "jc2"> </p>
<p id = "jc5"> </p>
<button id = "bt"> CLICK HERE </button>
<p id = "jc3"> </p>
<p id = "jc4"> </p>
<script>
var array_value = ["a", "A", "b", "B", "c", "C", "d", "D"];
var req_val = "b";
var req_val1 = "B";
document.getElementById("jc1").innerHTML = " Given array : [" + array_value + "]";
document.getElementById("jc2").innerHTML = " Given Value to be searched: " + req_val;
document.getElementById("jc5").innerHTML = " Given Value to be searched: " + req_val1;
$("#bt").click(function(){
document.getElementById("jc3").innerHTML = " <b> Value contains at position: </b> " + $.inArray(req_val, array_value);
document.getElementById("jc4").innerHTML = " <b> Value contains at position: </b> " + $.inArray(req_val1, array_value);
});
</script>
</body>
</html>Output before click button
Output after click button
Example: the contains method with number and string example, and the output shows below.
<!DOCTYPE HTML>
<html>
<head>
<title> jQuery method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"> </script>
</head>
<body>
<h3> jQuery array contains method </h3>
<p id = "jc1"> </p>
<p id = "jc2"> </p>
<p id = "jc5"> </p>
<button id = "bt"> CLICK HERE </button>
<p id = "jc3"> </p>
<p id = "jc4"> </p>
<script>
var array_value = ["ram", "sham", 12, 45, "simple", 27, "d", "D"];
var req_val = "ram";
var req_val1 = 45;
document.getElementById("jc1").innerHTML = " Given array : [" + array_value + "]";
document.getElementById("jc2").innerHTML = " Given Value to be searched: " + req_val;
document.getElementById("jc5").innerHTML = " Given Value to be searched: " + req_val1;
$("#bt").click(function(){
document.getElementById("jc3").innerHTML = " <b> Value contains at position: </b> " + $.inArray(req_val, array_value);
document.getElementById("jc4").innerHTML = " <b> Value contains at position: </b> " + $.inArray(req_val1, array_value);
});
</script>
</body>
</html>Output before click button
Output after click button
Example: the contains method with no contain value examples and output is shown below.
<!DOCTYPE HTML>
<html>
<head>
<title> jQuery method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jQuery/3.5.1/jQuery.min.js"> </script>
</head>
<body>
<h3> jQuery array contains method </h3>
<p id = "jc1"> </p>
<p id = "jc2"> </p>
<button id = "bt"> CLICK HERE </button>
<p id = "jc3"> </p>
<script>
var array_value = ["X", "A", "Y", "B", "Z", "C", "Y", "D"];
var req_val = "M";
document.getElementById("jc1").innerHTML = " Given array : [" + array_value + "]";
document.getElementById("jc2").innerHTML = " Given Value to be searched: " + req_val;
$("#bt").click(function(){
document.getElementById("jc3").innerHTML = " <b> Value contains at position: </b> " + $.inArray(req_val, array_value);
});
</script>
</body>
</html>Output before click button
Output after click button
Conclusion
The contains method simplifies array value position for users and developers. This method only checks value is available or not in the given array.
The large size data handle without disturbing the array and its value from developers. This method helps to maintain the array and its index position.
The contains method creates simple, user-friendly, and attractive web applications with complicated data.
Recommended Articles
This is a guide to jQuery array contains. Here we discuss the overview of jQuery array contains and methods along with the examples. You may also have a look at the following articles to learn more –
