jQuery Map Method

Back to: jQuery Tutorials

jQuery Map Method with Examples

In this article, I am going to discuss the How to use the jQuery Map Method with Examples. Please read our previous article, where we discussed the jQuery Add, Remove and Toggle class. At the end of this article, you will understand everything about the jQuery Map Method.

jQuery Map Method
  1. We have learned jquery each() method in the previous articles. Now there is another method in jquery called the map() method. jQuery map() method is also used to iterate over the matched elements.
  2. In brief, if you want to produce a plain array or concatenated string based on the set of matched elements use the map() method over each() method.
  3. The map() method passes each element in the current matched set through a function, producing a new jQuery object containing the return values.
  4. As the return value is a jQuery object, which contains an array, it’s very common to call get() on the result to work with a basic array.

Syntax: $(selector).map( function(index, currentElement){})

Parameters of the callback:

  1. Index: index of the current DOM element which we are iterating over
  2. currentElement: Current DOM element of the iteration.
Example: jQuery Map Method

Suppose that we have to make an array based on the index and values of a list item. At first, let’s see how to do this by each() method. In the below example, we are using each() method. We have created an empty array first. Then for each iteration, we are pushing a new item to that array. Here item parameter is receiving the current element over which the iteration is going on; so we can use $(this) too. In that case, we can get rid of the item parameter.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Map Method</title>
</head>
<body>
    <h3>jQuery Map Method</h3>
    <section>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>ReactJS</li>
        <li>Angular</li>
      </ul>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        const items = [];
        $("li").each(function (index, item) {
          items.push(`Index: ${index} | Text: ${$(item).text()}`);
        });
        console.log(items);
      });
    </script>
</body>
</html>

Now run the above code and then open the browser developer tool by pressing the F12 key and have a look at the Console tab and you should see the following logs.

jQuery Map Method with Examples

Now let’s see how to do this by using the jQuery map() method.

In this example, we are using the map method. Map() method itself returns a jQuery object from which we can get a plain array by get() method. So there is no need to initiate with an empty array. Map() method is simpler to use here.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Map Method</title>
</head>
<body>
    <h3>jQuery Map Method</h3>
    <section>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>ReactJS</li>
        <li>Angular</li>
      </ul>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        const items = $("li")
          .map(function (index, item) {
            return `Index: ${index} | Text: ${$(item).text()}`;
          })
          .get();
        console.log(items);
      });
    </script>
</body>
</html>

Now run the above code and open the browser developer tool by pressing the F12 key and have a look at the Console tab and you should see the same logs as the previous example as shown in the below image.

jQuery Map Method

jQuery Map Method Example:

Now suppose in the same DOM, we have to create a concatenated string with values of list items delimited by “;”. At first, let’s see by each() method. In the below example, we have initiated an empty string. For each iteration, we are adding the value to the string followed by a “;”

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Map Method</title>
</head>
<body>
    <h3>jQuery Each Method</h3>
    <section>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>ReactJS</li>
        <li>Angular</li>
      </ul>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        let string = "";
        $("li").each(function (index, item) {
          string += $(item).text() + ";";
        });
        console.log(string);
      });
    </script>
</body>
</html>

Now run the above code and open the browser developer tool by pressing the F12 key and have a look at the Console tab and you should see the following logs.

jQuery Map Method Example

You can see here, in this method, there is an “;” at the end of the string as we were adding a “;” at the end of the list text. We don’t want that. We can use substr() method to get a substring from that as shown in the below example. In the below example, we are extracting a substring starting from index 0 to the second last character of the string.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Map Method</title>
</head>
<body>
    <h3>jQuery Each Method</h3>
    <section>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>ReactJS</li>
        <li>Angular</li>
      </ul>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        let string = "";
        $("li").each(function (index, item) {
          string += $(item).text() + ";";
        });
        string = string.substr(0, string.length - 1);
        console.log(string);
      });
    </script>
</body>
</html>

Now run the above code and open the browser developer tool by pressing the F12 key and have a look at the Console tab and you should see the following logs.

jQuery Map Method Example

Now let’s see how to achieve the same by using the jQuery map() method. We know that the map() method returns a jQuery object containing an array. So by get() method we are converting that into a plain array and then by JavaScript join() method we are joining the values of the array with the separator “;”.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Map Method</title>
</head>
<body>
    <h3>jQuery Map Method</h3>
    <section>
      <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>jQuery</li>
        <li>ReactJS</li>
        <li>Angular</li>
      </ul>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        let string = $("li")
          .map(function (index, item) {
            return $(item).text();
          })
          .get()
          .join(";");
        console.log(string);
      });
    </script>
</body>
</html>

Now run the above code and open the browser developer tool by pressing the F12 key and have a look at the Console tab and you should see the following logs.

How to use the jQuery Map Method with Examples

Another Example of jQuery Map Method:

Let’s see another example of the jQuery map() method. In the below example, we have a form. At the click of the submit button, we are alerting the values of the input fields as a string by using the map() method.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Map Method</title>
</head>
<body>
    <section>
      <form action="/">
        <fieldset>
          <legend>Name:</legend>
          <input
            type="text"
            name="Name"
            placeholder="Enetr Your Name"
            value="John doe"
          />
        </fieldset>
        <fieldset>
          <legend>Email:</legend>
          <input
            type="email"
            name="Email"
            placeholder="Enetr Your Email"
            value="johndoe@gmail.com"
          />
        </fieldset>
        <fieldset>
          <legend>Select the position you want to apply</legend>
          <select name="position" class="position" multiple>
            <option value="webDeveloper" selected>Web Developer</option>
            <option value="webDesigner">Web Designer</option>
            <option value="graphicDesigner">Graphic Designer</option>
            <option value="businessAnalyst">Business Analyst</option>
            <option value="telecaller">Telecaller Executive</option>
          </select>
        </fieldset>
        </fieldset> 
        </br>
        <button class="demo" type="submit">Submit</button>
      </form>
    </section>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        var values = $(":input")
          .map(function (index, item) {
            return $(item).val();
          })
          .get()
          .join("-");
        var values = values.substr(0, values.length - 1);
        $(".demo").click(function () {
          alert(values);
        });
      });
    </script>
</body>
</html>

Now run the above code and click on the Submit button and you will get the following output.

How to use the jQuery Map Method

In the next article, I am going to discuss the difference between Each and Map in jQuery with Examples. Here, in this article, I try to explain How to use the jQuery Map Method with Examples and I hope you enjoy this article.

Leave a Reply

Your email address will not be published. Required fields are marked *