jQuery.map - usi pratici per la funzione?

Question

Sto cercando di comprendere meglio la funzione jQuery.map.

Quindi in termini generali .map prende un array e lo "mappa" in un altro array di elementi.

semplice esempio:

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

risultati in [4,5,6]

credo di aver capito quello che fa. Voglio capire perché qualcuno dovrebbe averne bisogno. Qual è l'uso pratico di questa funzione? Come stai usando questo nel tuo codice?

Answer 1

$.map significa convertire elementi in un set.

Per quanto riguarda il DOM, io lo uso spesso per cogliere rapidamente i valori dai miei elementi:

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

È possibile che converte i <label> elementi all'interno di un elenco di utenti al solo il testo in esso contenute. Poi posso fare:

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

Answer 2

Ecco una cosa che potresti usare per.

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

Answer 3

Mapping ha due scopi principali: afferrare oggetti di una serie di elementi, e la conversione di ogni elemento in qualcosa d'altro.

Supponiamo di avere un array di oggetti che rappresentano gli utenti:

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

Mapping è un modo conveniente per afferrare una certa proprietà di ciascun elemento. Per esempio, è possibile convertire in un array di ID utente:

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

Come altro esempio, supponiamo di avere un insieme di elementi:

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

Se si desidera memorizzare il contenuto di quelli da tavolo le intestazioni per un utilizzo successivo, è possibile ottenere una matrice dei loro contenuti HTML:

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

Answer 4

La conversione dei valori di codice in testo di codice sarebbe possibile. Ad esempio quando hai una lista di selezione e ogni valore indicizzato ha un testo di codice corrispondente.

Answer 5

Map è un high-order function, che consente di applicare determinata funzione di una data sequenza, generando una nuova sequenza risultante contenente i valori di ciascun elemento originale con il valore della funzione applicata.

Io uso spesso per ottenere un selettore valida di tutti i miei pannelli jQuery UI per esempio:

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

che restituirà una stringa separati da virgola dei pannelli disponibili nella pagina corrente in questo modo:

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

E questo è un selettore valido che può essere utilizzato:

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

Answer 6

Esempio:

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

Qui server sarà il ritorno della "risposta" in formato JSON, utilizzando $.parseJSON si sta convertendo oggetto JSON per Javascript matrice Object.

Utilizzando $.map per ogni valore oggetto lo chiamerà la function(item) per visualizzare il valore del risultato: item.tagName, data: item.id

Answer 7

Recentemente ho scoperto un eccellente esempio di .map in un ambiente pratico.

Data la domanda di Come per aggiungere opzioni ad un selectbox dato questo array (o di un altro array):

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

this StackOverflow answer utilizza .map:

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