Я пытаюсь лучше понять функцию jQuery.map.
Итак, в общем случае .map принимает массив и "сопоставляет" его с другим массивом элементов.
простой пример:
$.map([0,1,2], function(n){
return n+4;
});
приводит к [4,5,6]
Думаю, я понимаю, что он делает. Я хочу, чтобы кто-то нуждался в этом. Каково практическое использование этой функции? Как вы используете это в своем коде?
$.map - все о преобразовании элементов в набор.
Что касается DOM, я часто использую его для быстрого вычитания значений из моих элементов:
var usernames = $('#user-list li label').map(function() {
return this.innerHTML;
})
Вышеописанное преобразует элементы <label> внутри списка пользователей только в текст, содержащийся в нем. Тогда я могу сделать:
alert('The following users are still logged in: ' + usernames.join(', '));
Сопоставление имеет две основные цели: захват свойств из массива элементов и преобразование каждого элемента в нечто другое.
Предположим, у вас есть массив объектов, представляющих пользователей:
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(); });
И это допустимый селектор, который можно использовать:
$(myPanels);// do something with all the panels
Пример:
$.map($.parseJSON(response), function(item) {
return { value: item.tagName, data: item.id };
})
Здесь сервер будет возвращать "ответ" в формате JSON, используя $.parseJSON, он преобразует объект JSON в массив объектов Javascript.
Используя $.map для каждого значения объекта, он вызовет function(item) для отображения значения результата: item.tagName, data: item.id
Здесь вы можете использовать его.
$.map(["item1","item2","item3"], function(n){
var li = document.createElement ( 'li' );
li.innerHTML = n;
ul.appendChild ( li );
return li;
});
Недавно я нашел отличный пример .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);
})
);
Преобразование значений кода в текст кода было бы возможным. Например, когда у вас есть список выбора, и каждое индексированное значение имеет соответствующий текст кода.