Updated April 20, 2023
Description to jQuery grep
The jQuery grep() function is used to finds an element of an array that satisfies the filter function. The jQuery grep() function is a built-in function in jQuery. The jQuery grep() function removes the items from the array which do not pass the filter function or condition test, keeps only items that passed the filter function. The filter function returns an array element and the index of the element which is passed within an array as an argument.
Syntax:
jQuery.grep(array, function(element, index) [, invert ]);Parameters:
- array – This is not an optional parameter. It specifies the array whose elements are to filter.
- function(element, index) – This is not an optional parameter. It specifies the function that is executed as a filter function on array elements, it processes each element of an array. The function takes two arguments as element and index. The elements store the elements of an array and the index store the index of the corresponding element. The return value of the function is true (if passed) or false (if fail).
- invert – This is an optional parameter that specifies whether to return the passed elements or failed elements. It takes Boolean values true or false. The false value specifies that the grep() function returns an array element for those the filter function returns true and the true value specifies that the grep() function returns an array element for those the filter function return false.
Working of the jQuery grep() Function
The JQuery grep() function accepts three parameters as first parameter array, second parameter filter function and third parameter invert which is optional. Suppose we have an student marks list as “marks = [ 50, 78, 40, 89 ]”, now we need to filter out the passing marks( marks >= 50). So we can use the grep() function as “$.grep(array, function(element, index) {return ( element >= 50 ); });”, which return 50, 78, 89 elements as an output.
Examples for the jQuery grep() function
Example of jQuery grep() function to filter out the vowels from a given array –
Example #1
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 grep() function </title>
<script>
function fun()
{
var array = [ 'a', 'c', 't', 'e', 'p', 'o' ];
$("#d1").html("The elements of an array before grep() function is : " + array);
res = $.grep(array, function(element, index) {
return ( element == 'a' || element == 'e' || element == 'i' || element == 'o' || element == 'u' );
}, false);
$( "#d2").html("The elements of an array after grep() function is : " + res);
$( "#d3").html("The elements of an original array is : " + array);
}
</script>
</head>
<body>
<h3> The Example for grep() function : </h3>
<button onclick = "fun()" id = "test" > Apply grep() function </button>
<br>
<div id = "d1"> </div>
<div id = "d2"> </div>
<div id = "d3"> </div>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, the array is created which contains characters. Next, the grep() function is used to filter the characters of an array and return only those elements which are vowels, and display once we click on the button.
Example of jQuery grep() function to filter out the even numbers present at the even index from a given array –
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 grep() function </title>
<script>
function fun()
{
var array = [ 20, 12, 65, 45, 44, 87, 90 ];
res = $.grep(array, function(element, index) {
return ( element%2 == 0 && index%2 == 0 );
});
alert("The elements of an array before grep() function is : " + array + "\nThe elements of an array after grep() function is : " + res + "\nThe elements of an original array is : " + array);
}
</script>
</head>
<body>
<h3> The Example for grep() function : </h3>
<button onclick = "fun()" id = "test" > Apply grep() function </button>
</body>
</html>An output of the above code is –
Once we click on the first button, the output is –
In the above code, the array is created which contains some numbers. Next, the grep() function is used to filter out the even numbers present at an even index from an array and display once we click on the button, as we can see in the output.
Example of jQuery grep() function to filter out the negative numbers from a given array with invert true –
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 grep() function </title>
<style>
p {
color: blue;
}
div {
color: green;
}
</style>
</head>
<body>
<h3> The Example for grep() function : </h3>
<p id = "p1"> </p>
<div id = "p2"> </div>
<script>
var array = [ 20, -12, -65, 45, -44, 87, -90 ];
res = $.grep(array, function(element, index) {
return ( element > 0 );
}, true );
$( "#p1" ).text("The elements of an array before grep() function is : " + array);
$( "#p2" ).text("The elements of an array after grep() function is : " + res);
</script>
</body>
</html>An output of the above code is –
In the above code, the array is created which contains positive and negative numbers. Next, the grep() function is used to filter out the positive numbers from an array, but for the invert, the value passed is true, so it filtering out negative numbers, as we can see in the output.
Conclusion
The jQuery grep() function is a built-in function, which is used to finds an element of an array that satisfy the filter function.
Recommended Articles
This is a guide to jQuery grep. Here we discuss the description, Working of the jQuery grep() Function examples with code implementation respectively. You may also have a look at the following articles to learn more –
