Методы .map() и .each() позволяют разработчику предоставить собственную функцию обратного вызова, которая будет автоматически применена к каждому элементу выбранного набора. Эта функция должна иметь два аргумента: индекс текущего элемента и текущий DOM-элемент.

 
Различаются эти методы между собой тем, что возвращаемым значением метода .map() является новый объект, который содержит значения, возвращенные функцией обратного вызова, тогда как метод  .each() возвращает исходный объект, элементы которого были изменены указанной функцией. Отсюда следует, что метод .each() можно включать в цепочки вызовов, а метод .map() — нельзя.

 
Чтобы найти все абзацы и элементы с классом foo и присоединить к каждому из них имя дескриптора и индекс элемента, используйте приведенный ниже код.
$("p,.foo").map(function(index, ele){
        $(this).append(" "+ele.tagName+" #"+index);
    });
Результатом выполнения этого кода будет добавление имени дескриптора элемента и индекса элемента в конец каждого из элементов выбранного набора (рис. 2.19).

 Рис. 2.19. Вид тестовой страницы после применения метода ,map() к функции обратного вызова для отображения имени и индекса каждого из найденных элементов

Проделайте то же самое для метода .each(), заменив им в предыдущем коде метод .тар().
$("p,.foo").each(function(index, ele){
        $(this).append(" "+ele.tagName+" #"+index);
    });

Полученный результат совпадет с предыдущим.

 
Различия между этими двумя методами проявляются в тех случаях, когда требуется выполнить некоторую дополнительную обработку после применения метода .map() или .each(). Например, если вы хотите присоединить имя дескриптора и индекс к каждому абзацу и элементу с классом foo, как это уже было проиллюстрировано, а затем отобрать элементы span с классом foo и изменить для них цвет фона и текста, то вполне возможно, что вы попытались бы применить код наподобие следующего.

 
$("p,.foo").map(function(index, ele){
        $(this).append(" "+ele.tagName+" #"+index);
    })
    .find("span.foo")
        .css({
                "color":"red",
                "background":"yellow"
            });

После применения этого кода имена дескрипторов и индексы присоединятся к элементам, но никакого изменения стиля элемента span не произойдет. Объясняется это тем, что объект, возвращенный методом .map(), уже не содержит ссылок на элементы.

 
Чтобы приведенный выше код заработал, как нам хочется, подставьте в него вместо вызова метода .map() вызов  .each().
$("p,.foo").each(function(index, ele){
        $(this).append(" "+ele.tagName+" #"+index);
    })
    .find("span.foo")
        .css({
                "color":"red",
                "background":"yellow"
            });

Теперь выполнение исправленного кода даст требуемый результат (рис. 2.20).

Рис. 2.20. Использование метода .each() позволило получить требуемый результат