jQuery each() and map()

When you need to do something different for each element of a selection, or loop over an array or an object, use each(). For many tasks you do not need a loop, because jQuery methods work on all selected elements, but when you need it, it is simple.

$(selector).each()

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

$('li').each(function (index, element) {
  console.log(index + ': ' + $(element).text());
});

• index is the position, starting from 0.
• element is the DOM element. Inside the function, this is the same element.

Break and continue

Return false to stop the loop (like break). Return true (or just return) to go to the next item (like continue).

$('li').each(function (i) {
  if (i === 0) return true;            // skip the first
  if ($(this).text() === 'Cherry') return false;   // stop here
  console.log($(this).text());
});

$.each() for arrays and objects

<p>Page</p>

var colors = ['red', 'green', 'blue'];
$.each(colors, function (i, value) {
  console.log(i + ' = ' + value);
});

var user = { name: 'Anita', city: 'Delhi' };
$.each(user, function (key, value) {
  console.log(key + ': ' + value);
});

map(): make a new array from the elements

.map() runs a function for each element and collects the returned values. Add .get() to change the jQuery object into a normal array.

<ul>
  <li data-price="10">Pen</li>
  <li data-price="25">Book</li>
  <li data-price="5">Eraser</li>
</ul>

var names = $('li').map(function () {
  return $(this).text();
}).get();
console.log(names);

var prices = $('li').map(function () {
  return $(this).data('price');
}).get();
console.log(prices);

var total = prices.reduce(function (sum, p) { return sum + p; }, 0);
console.log('Total: ' + total);

$.map() and $.grep()

var numbers = [1, 2, 3, 4, 5, 6];
console.log($.map(numbers, function (n) { return n * 2; }));
console.log($.grep(numbers, function (n) { return n % 2 === 0; }));

Native alternatives

Modern JavaScript has forEach, map and filter for arrays, and they are the better choice for pure arrays. Use the jQuery methods for jQuery selections.

var numbers = [1, 2, 3, 4, 5, 6];
console.log(numbers.map(function (n) { return n * 2; }));
console.log(numbers.filter(function (n) { return n % 2 === 0; }));

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.