how to use map function in jquery?

Question

I am trying to add 10 number(digit) in each element using map function on button click.I tried like this

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>


    </style>
  </head>

  <body>

    <button class="add">ADD</button>
    <ul class="item">
      <li class="abc">123</li>
      <li class="pp">12</li>
      <li class="abc">78</li>
      <li class="ac">13</li>
    </ul>
    <script>
    $(function () {

        $('.add').click(function () {
            var $items = $('.item li');
            var $newItem =$items.map(function (i,item) {
                console.log($(item).text())
                return $(item).text() +10;
            });
            console.log($newItem)
        });

    });
    </script>
  </body>

</html>

Expected output

score 7 · Accepted Answer · edited May 23 '17 at 11:54

All you need is actually to chain .get() after calling the .map() function, which will return you the array that you have constructed, e.g.:

var $newItem = $items.map(...).get();

The reason why .get() is needed is because .map() generates an array-like object. Since you have started off with a collection of jQuery objects ($newItem), it will return a DOM node list. In order to get the array you intended, you have to call .get() to return a true array (not a DOM node list). A better explanation of why this is needed is available here: map() get() confusion

On a side note, $(item).text() will not be automatically casted into a Number. This means that if the value of the text if 123, it is actually seen as a string. The + operator will concatenate but not perform addition, i.e. $(item).text() + 10 will give you 12310 instead of 133. In order to cast it to a number, simply prepend a unary + operator in front of the variable: +$(item).text() + 10.

Here is a proof-of-concept example of your scenario, with the two modifications mentioned above applied:

$(function() {

  $('.add').click(function() {
    var $items = $('.item li');
    var $newItem = $items.map(function(i, item) {
      console.log($(item).text())
      return +$(item).text() + 10;
    }).get();
    console.log($newItem)
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">ADD</button>
<ul class="item">
  <li class="abc">123</li>
  <li class="pp">12</li>
  <li class="abc">78</li>
  <li class="ac">13</li>
</ul>

score 1 · Answer 2 · answered Apr 14 '17 at 06:56

I think you're looking for $.each() instead of $.map():

$(function() {
  $('.add').click(function() {
    var $items = $('.item li');

    $items.each(function(i, item) {
      $(item).text(parseInt($(item).text()) + 10);
      
      console.log($(item).text())
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">ADD</button>
<ul class="item">
  <li class="abc">123</li>
  <li class="pp">12</li>
  <li class="abc">78</li>
  <li class="ac">13</li>
</ul>

Mihai Alexandru-Ionut · Answer 3 · 2017-04-14T07:17:28.487

1

Here is solution using map method.

You have to use Array.from() method.

The Array.from() method creates a new Array instance from an array-like or iterable object.

Also, you should use parseInt() method in order to add two numbers.

$(function () {
         $('.add').click(function () {
            var $items = $('.item li');
            var $newItem =$items.map(function (i,item) {
                $(item).text(parseInt($(item).text()) +10);
                return parseInt($(item).text()) +10;
            });
            console.log(Array.from($newItem));
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">ADD</button>
<ul class="item">
   <li class="abc">123</li>
   <li class="pp">12</li>
   <li class="abc">78</li>
   <li class="ac">13</li>
</ul>

I recommend you to use each method.map only create a new array by applying a provided callback function for every item.

$('.add').click(function() {
  $('.item li').each(function() {
    $(this).text(parseInt($(this).text())+10);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add">ADD</button>
<ul class="item">
  <li class="abc">123</li>
  <li class="pp">12</li>
  <li class="abc">78</li>
  <li class="ac">13</li>
</ul>

edited Apr 14 '17 at 07:17

answered Apr 14 '17 at 07:02

Mihai Alexandru-Ionut

47,092
13
101
128

please exchange the html with expected output – user5711656 Apr 14 '17 at 07:08
You can now remove the `Array.from` from answer. Clearly answers the question but don't you think this is doing more than just updating the numbers by adding 10 into it and will be slower. – Tushar Apr 14 '17 at 07:13
@Tushar, maybe he want to view the array. – Mihai Alexandru-Ionut Apr 14 '17 at 07:14
I think OP is confused with JS `map` and `$.map`. – Tushar Apr 14 '17 at 07:14
@Tushar, yes, in this situation I recommend him to use `each` mehod, map only create a new array by applying a provided function for every item. – Mihai Alexandru-Ionut Apr 14 '17 at 07:15
@user5711656, what about my answer ?? – Mihai Alexandru-Ionut Apr 14 '17 at 07:23
1

@user5711656 I thought you want to update the HTML by new value as said in question and also mentioned in comments here, but you accepted answer which does not do this. Maybe, you like the explanation. – Tushar Apr 14 '17 at 07:27

score 0 · Answer 4 · answered Apr 14 '17 at 07:37

you are adding number into text. first you need to convert text to number using JavaScript parseInt(text) function.

parseInt(text here)

and using get() function on $.map function

$.map(function(){}).get();

it will return you an array

Js

 $('.add').click(function () {
     var $items = $('.item li');
     var $newItem =$items.map(function (i,item) {
         console.log($(item).text());
         return parseInt($(item).text()) +10;
     }).get();
});

JsFiddle

how to use map function in jquery?

4 Answers4