Teach with us

What is the difference between jQuery.map() and jQuery.grep() Functions in jQuery?

The jQuery map function translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements. The grep() function is used to find an element of an array. The difference is we use $.grep to filter an array and $.map to apply a function to each item in the array.

jQuery map function

The map method translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements.

The following are the parameters of jQuery.map() method:

  • callback − The function to execute on each element in the set.

Example

You can try to run the following code to learn how to work with jQuery.map() method:

Live Demo

<html>

   <head>
      <title>jQuery Map Method</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function(){
           
            var mappedItems = $("li").map(function (index) {
               var replacement = $("<li>").text($(this).text()).get(0);
               
               if (index == 0) {
                  // make the first item all caps
                  $(replacement).text($(replacement).text().toUpperCase());
               } else if (index == 1 || index == 3) {
                  // delete the second and fourth items
                  replacement = null;
               } else if (index == 2) {
                  // make two of the third item and add some text
                  replacement = [replacement,$("<li>").get(0)];
                  $(replacement[0]).append("<b> - A</b>");
                  $(replacement[1]).append("Extra <b> - B</b>");
               }

               // replacement will be an dom element, null,
               // or an array of dom elements
               return replacement;
            });
               
            $("#results").append(mappedItems);
         });
      </script>
       
      <style>
         body {
             font-size:18px;
         }
         ul {
             float:left;
             margin:0 30px;
             color:green;
             
         }
         #results {
            color:blue;
         }
      </style>
   </head>
   
   <body>

      <ul>
         <li>First</li>
         <li>Second</li>
         <li>Third</li>
         <li>Fourth</li>
         <li>Fifth</li>
      </ul>
       
      <ul id = "results">
      </ul>
       
   </body>
   
</html>

jQuery grep function

The grep() function is used to find an element of an array.

Example

You can try to run the following code to learn how to work with grep():

Live Demo

<html>
<head>
  <title>jQuery grep() function</title>
  <style>
  div {
    color: blue;
  }
  p {
    color: red;
    margin: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<p></p>

<script>
  var arr1 = [ 1, 7, 4, 8, 6, 1, 9, 5, 3, 7, 3, 8, 5, 8, 2 ];
  $( "div" ).text( arr1.join( ", " ) );
 
  arr1 = jQuery.grep(arr1, function( n, i ) {
    return ( n !== 5 && i > 6 );
  });
 
  $( "p" ).text( arr1.join( ", " ) );
</script>
 
</body>
</html>
Updated on 17-Dec-2019 10:21:43

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements