JQuery.map - Практическое использование функции?

Я пытаюсь лучше понять функцию jQuery.map.

Итак, в общем случае .map принимает массив и "сопоставляет" его с другим массивом элементов.

простой пример:

$.map([0,1,2], function(n){
    return n+4;
});

приводит к [4,5,6]

Думаю, я понимаю, что он делает. Я хочу, чтобы кто-то нуждался в этом. Каково практическое использование этой функции? Как вы используете это в своем коде?

Ответы

Ответ 1

$.map - все о преобразовании элементов в набор.

Что касается DOM, я часто использую его для быстрого вычитания значений из моих элементов:

var usernames = $('#user-list li label').map(function() {
    return this.innerHTML;
})

Вышеописанное преобразует элементы <label> внутри списка пользователей только в текст, содержащийся в нем. Тогда я могу сделать:

alert('The following users are still logged in: ' + usernames.join(', '));

Ответ 2

Сопоставление имеет две основные цели: захват свойств из массива элементов и преобразование каждого элемента в нечто другое.

Предположим, у вас есть массив объектов, представляющих пользователей:

var users = [
  { id: 1, name: "RedWolves" },
  { id: 2, name: "Ron DeVera" },
  { id: 3, name: "Jon Skeet" }
];

Отображение - это удобный способ захватить определенное свойство из каждого элемента. Например, вы можете преобразовать его в массив идентификаторов пользователей:

var userIds = $.map(users, function(u) { return u.id; });

В качестве другого примера, скажем, у вас есть набор элементов:

var ths = $('table tr th');

Если вы хотите сохранить содержимое этих заголовков таблиц для последующего использования, вы можете получить массив их содержимого HTML:

var contents = $.map(ths, function(th) { return th.html(); });

Ответ 4

Пример:

$.map($.parseJSON(response), function(item) {     
    return { value: item.tagName, data: item.id };
})

Здесь сервер будет возвращать "ответ" в формате JSON, используя $.parseJSON, он преобразует объект JSON в массив объектов Javascript.

Используя $.map для каждого значения объекта, он вызовет function(item) для отображения значения результата: item.tagName, data: item.id

Ответ 5

Здесь вы можете использовать его.

$.map(["item1","item2","item3"], function(n){
    var li = document.createElement ( 'li' );
    li.innerHTML = n;
    ul.appendChild ( li );
    return li;
});

Ответ 6

Недавно я нашел отличный пример .map в практической настройке.

Учитывая вопрос Как добавить опции в selectbox, заданные этим массивом (или другим массивом):

selectValues = { "1": "test 1", "2": "test 2" };

fooobar.com/questions/1166/... использует .map:

$("mySelect").append(
  $.map(selectValues, function(v,k) {
     return $("<option>").val(k).text(v);
  })
);

Ответ 7

Преобразование значений кода в текст кода было бы возможным. Например, когда у вас есть список выбора, и каждое индексированное значение имеет соответствующий текст кода.