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

Question

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

Так что в общих чертах .map принимает массив и «сопоставляет» его с другим массивом элементов.

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

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

результаты [4,5,6]

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

Answer 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(', ')); 

Answer 2

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

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

Answer 3

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

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

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

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

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

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

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

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

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

Answer 4

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

Answer 5

Карта является high-order function, что позволяет применить определенную функцию в заданной последовательности, генерируя новый результирующую последовательность, содержащую значения каждого исходного элемента со значением приложенного функции.

Я часто использую его, чтобы получить правильный селектор всех моих панелей JQuery UI, например:

var myPanels = $('a').map(function() { 
    return this.hash || null; 
}).get().join(','); 

Это возвращает разделенный запятыми строку панелей доступны в текущей страницы, как это:

"#home,#publish,#request,#contact" 

И это действительный селектор, который может быть использован:

$(myPanels);// do something with all the panels 

Answer 6

Пример:

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

Здесь сервер будет возвращение «ответ» в формате JSON, с помощью $.parseJSON его преобразования объекта JSON в массив JavaScript Object.

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

Answer 7

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

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

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

this StackOverflow answer использует .map:

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