jQuery.map – Praktische Anwendungen für die Funktion?

Lesezeit: 3 Minuten

Ich versuche das besser zu verstehen jQuery.map Funktion.

Im Allgemeinen nimmt .map also ein Array und “ordnet” es einem anderen Array von Elementen zu.

einfaches Beispiel:

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

ergibt sich [4,5,6]

Ich glaube, ich verstehe, was es tut. Ich möchte nachvollziehen, warum jemand es brauchen würde. Was ist der praktische Nutzen dieser Funktion? Wie verwenden Sie dies in Ihrem Code?

Benutzer-Avatar
Ron DeVera

Das Mapping hat zwei Hauptzwecke: das Erfassen von Eigenschaften aus einem Array von Elementen und das Konvertieren jedes Elements in etwas anderes.

Angenommen, Sie haben ein Array von Objekten, die Benutzer darstellen:

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

Mapping ist eine bequeme Möglichkeit, eine bestimmte Eigenschaft von jedem Element zu erfassen. Sie können es beispielsweise in ein Array von Benutzer-IDs konvertieren:

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

Nehmen wir als weiteres Beispiel an, Sie haben eine Sammlung von Elementen:

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

Wenn Sie den Inhalt dieser Tabellenköpfe für die spätere Verwendung speichern möchten, können Sie ein Array ihres HTML-Inhalts abrufen:

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

  • Kühl. Sie sollten Tipps hinzufügen zu: stackoverflow.com/questions/182630/jquery-tips-and-tricks

    – klpse

    2. April 2009 um 7:53 Uhr

$.map dreht sich alles um das Umwandeln von Gegenständen in ein Set.

Was das DOM angeht, benutze ich es oft, um schnell Werte aus meinen Elementen herauszuholen:

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

Das obige konvertiert die <label> Elemente innerhalb einer Liste von Benutzern nur auf den darin enthaltenen Text. Dann kann ich:

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

  • $.map und .Karte() sind unterschiedliche Funktionen. Sie beziehen sich auf $.map und das bereitgestellte Beispiel ist von .map()

    – TJ

    8. Mai 2014 um 7:37 Uhr

  • Der im Beispiel bereitgestellte Code funktioniert nicht so wie er ist, da Sie zuerst die zugeordnete Liste mit .get() in ein natives Array konvertieren müssen. Hier ist der korrigierte Code: var usernames = $(‘#user-list li label’).map(function() { return this.innerHTML; }).get();

    – thdoan

    27. Mai 2014 um 3:47 Uhr


Karte ist ein Funktion höherer Ordnungmit dem Sie bestimmte Funktionen auf eine bestimmte Sequenz anwenden können, wodurch eine neue resultierende Sequenz generiert wird, die die Werte jedes ursprünglichen Elements mit dem Wert der angewendeten Funktion enthält.

Ich verwende es oft, um zum Beispiel einen gültigen Selektor aller meiner jQuery-UI-Panels zu erhalten:

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

Dadurch wird eine durch Kommas getrennte Zeichenfolge der auf der aktuellen Seite verfügbaren Panels wie folgt zurückgegeben:

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

Und das ist ein gültiger Selektor, der verwendet werden kann:

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

  • Das ist ein schöner Anwendungsfall!

    – MSC

    6. März 2016 um 8:06 Uhr

Benutzer-Avatar
Benutzer3086631

Beispiel:

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

Hier gibt der Server die „Antwort“ im JSON-Format zurück, indem er verwendet $.parseJSON Es konvertiert das JSON-Objekt in ein Javascript-Objekt-Array.

Durch die Nutzung $.map für jeden Objektwert wird es die aufrufen function(item) um den Ergebniswert anzuzeigen: item.tagName, data: item.id

Hier ist eine Sache, für die Sie es verwenden könnten.

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

Benutzer-Avatar
Gemeinschaft

Kürzlich entdeckte ich ein hervorragendes Beispiel dafür .Karte in praktischer Umgebung.

Angesichts der Frage nach So fügen Sie Optionen an eine Auswahlbox mit diesem Array (oder einem anderen Array) an:

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

diese StackOverflow-Antwort verwendet .map:

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

Benutzer-Avatar
AaronLS

Das Konvertieren von Codewerten in Codetext wäre eine mögliche Verwendung. Wenn Sie beispielsweise eine Auswahlliste haben und jeder indizierte Wert einen entsprechenden Codetext hat.

1227010cookie-checkjQuery.map – Praktische Anwendungen für die Funktion?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy