jQuery.grep()

jQuery

previous page next page

jQuery.grep()

Categories: Utilities

jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] ) Returns: Array

Description: Finds the elements of an array which satisfy a filter function. The original array is not affected.

  • version added: 1.0jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] )

    • array
      Type: Array
      The array to search through.
    • function(elementOfArray, indexInArray)
      Type: Function()
      The function to process each item against. The first argument to the function is the item, and the second argument is the index. The function should return a Boolean value. this will be the global window object.
    • invert
      Type: Boolean
      If "invert" is false, or not provided, then the function returns an array consisting of all elements for which "callback" returns true. If "invert" is true, then the function returns an array consisting of all elements for which "callback" returns false.

The $.grep() method removes items from an array as necessary so that all remaining items pass a provided test. The test is a function that is passed an array item and the index of the item within the array. Only if the test returns true will the item be in the result array.

The filter function will be passed two arguments: the current array item and its index. The filter function must return 'true' to include the item in the result array.

Examples:

Example: Filters the original array of numbers leaving that are not 5 and have an index greater than 4. Then it removes all 9s.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
                                  

                                    

                                      
                                        <!DOCTYPE html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <html>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <head>
                                      
                                    

                                  

                                  

                                    

                                        <style>
                                    

                                  

                                  

                                    

                                        div { color:blue; }
                                    

                                  

                                  

                                    

                                        p { color:green; margin:0; }
                                    

                                  

                                  

                                    

                                        span { color:red; }
                                    

                                  

                                  

                                    

                                        </style>
                                    

                                  

                                  

                                    

                                        <script src="http://code.jquery.com/jquery-latest.js"></script>
                                    

                                  

                                  

                                    

                                      
                                        </head>
                                      
                                    

                                  

                                  

                                    

                                      
                                        <body>
                                      
                                    

                                  

                                  

                                    

                                        <div></div>
                                    

                                  

                                  

                                    

                                        <p></p>
                                    

                                  

                                  

                                    

                                        <span></span>
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        <script>
                                        
                                      
                                    

                                  

                                  

                                    

                                      var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
                                    

                                  

                                  

                                    

                                      $("div").text(arr.join(", "));
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      arr = jQuery.grep(arr, function(n, i){
                                    

                                  

                                  

                                    

                                        return (n != 5 && i > 4);
                                    

                                  

                                  

                                    

                                      });
                                    

                                  

                                  

                                    

                                      $("p").text(arr.join(", "));
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      arr = jQuery.grep(arr, function (a) { return a != 9; });
                                    

                                  

                                  

                                    

                                      $("span").text(arr.join(", "));
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </script>
                                      
                                    

                                  

                                  

                                    

                                       
                                    

                                  

                                  

                                    

                                      
                                        </body>
                                      
                                    

                                  

                                  

                                    

                                      
                                        </html>

Example: Filter an array of numbers to include only numbers bigger then zero.

1
2
3
 
                                  

                                    

                                      $.grep( [0,1,2], function(n,i){
                                    

                                  

                                  

                                    

                                         return n > 0;
                                    

                                  

                                  

                                    

                                       });

Result:

1
 
                                  

                                    

                                      [1, 2]

Example: Filter an array of numbers to include numbers that are not bigger than zero.

1
2
3
 
                                  

                                    

                                      $.grep( [0,1,2], function(n,i){
                                    

                                  

                                  

                                    

                                          return n > 0;
                                    

                                  

                                  

                                    

                                      },true);

Result:

1
 
                                  

                                    

                                      [0]
 POWERED BYHERONOTE
previous page start next page