jquery-Objekt in Array-Objekt-Array umwandeln

Vorwort

In der Webentwicklung wird häufig jQuery, eine hervorragende JavaScript-Bibliothek, zum Betrieb des Document Object Model (DOM) verwendet. jQuery bietet eine Reihe von Funktionen zur Vereinfachung unserer Vorgänge, z. B. das Auswählen von Elementen, das Hinzufügen von Ereignissen usw. Wenn wir jedoch mit jQuery arbeiten, müssen wir manchmal jQuery-Objekte in JavaScript-Arrays oder Objektarrays konvertieren. Denn in einigen Fällen müssen wir die Elemente im jQuery-Objekt durchlaufen und ändern.

Dieser Artikel stellt hauptsächlich vor, wie jQuery-Objekte in Arrays und Objektarrays konvertiert werden, und bietet den Lesern einige praktische Anwendungsszenarien als Referenz.

JQuery-Objekt in Array konvertieren

In jQuery können Sie die Funktion toArray() verwenden, um ein jQuery-Objekt in ein Array zu konvertieren. Diese Funktion konvertiert alle Elemente im jQuery-Objekt in ein JavaScript-Array und gibt dieses Array zurück.

Angenommen, wir haben zum Beispiel das folgende HTML-Fragment:

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Wir können den folgenden Code verwenden, um alle li-Elemente auf dieser Seite abzurufen:

var $myList = $('#myList');
var $myListItems = $myList.find('li'); // 获取所有的li元素

# 🎜 🎜#Jetzt ist $myListItems ein jQuery-Objekt. Wir können die Funktion console.log() verwenden, um den Inhalt anzuzeigen:

console.log($myListItems);

In der Konsole können Sie die Ausgabe wie folgt sehen:

[li, li, li]

Diese Ausgabe stellt $myListItems dar ist ein jQuery-Objekt, das drei li-Elemente enthält. Wir können es mit der Funktion toArray() in ein JavaScript-Array konvertieren:

var myListItemsArray = $myListItems.toArray();

Nun ist myListItemsArray ein JavaScript-Array, das drei li-Elemente enthält.

JQuery-Objekt in Objektarray konvertieren

Zusätzlich zur Konvertierung eines jQuery-Objekts in ein JavaScript-Array müssen wir es manchmal auch in ein Objektarray konvertieren. Um dieses Ziel zu erreichen, können wir die Funktion map() verwenden. Die Funktion „map()“ durchläuft das jQuery-Objekt und führt für jedes Element eine Rückruffunktion aus. Anschließend werden die Rückgabewerte jedes Elements in einem neuen Array kombiniert und dieses Array zurückgegeben.

Betrachten Sie unten ein praktisches Beispiel. Angenommen, wir haben ein JSON-Objekt, das Benutzerdaten wie folgt enthält:

var users = [
  {"id": 1, "name": "Alice", "age": 23},
  {"id": 2, "name": "Bob", "age": 27},
  {"id": 3, "name": "Charlie", "age": 31},
  {"id": 4, "name": "David", "age": 19},
  {"id": 5, "name": "Emma", "age": 25},
  {"id": 6, "name": "Frank", "age": 36},
  {"id": 7, "name": "Grace", "age": 32},
  {"id": 8, "name": "Henry", "age": 41},
  {"id": 9, "name": "Ivy", "age": 28}
];

Jetzt müssen wir basierend auf diesen Daten eine HTML-Liste mit Benutzernamen und Alter erstellen. Wir können jQuery verwenden, um diese Liste zu erstellen:

var $userList = $('<ul>');
$(users).map(function(index, user) {
  var $userListItem = $('<li>');
  $userListItem.text(user.name + ' (' + user.age + ')');
  $userList.append($userListItem);
});

Jetzt haben wir eine Liste mit Benutzerdaten erstellt. Wir können dieses Listenelement zum Dokument hinzufügen:

$('body').append($userList);

In diesem Beispiel verwenden wir die Funktion „map()“, um die Benutzerdaten in ein Array von Objekten umzuwandeln, und erstellen dann einen HTML-Code mit den Benutzerinformationen Liste.

Zusammenfassung

In diesem Artikel wird erläutert, wie jQuery-Objekte in JavaScript-Arrays und Objektarrays konvertiert werden. Wir können jQuery-Objekte mit der Funktion toArray() in JavaScript-Arrays konvertieren und jQuery-Objekte mit der Funktion map() in Objektarrays konvertieren. Diese Techniken sind nützlich, wenn häufige Probleme in der Webentwicklung gelöst werden, beispielsweise das Durchlaufen und Ändern von DOM-Elementen und die Verarbeitung von JSON-Daten.

Das obige ist der detaillierte Inhalt vonjquery-Objekt in Array-Objekt-Array umwandeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!