HTML-Array zum Auflisten

In HTML werden Arrays häufig zum Speichern und Anzeigen von Daten verwendet. Die direkte Anzeige des Arrays führt jedoch zu einer schlechten Benutzererfahrung. Daher müssen wir das HTML-Array in eine benutzerfreundlichere Liste konvertieren.

Der Prozess der Konvertierung von HTML-Arrays in Listen kann mit JavaScript und jQuery erreicht werden. Im Folgenden wird die Implementierungsmethode zum Konvertieren eines HTML-Arrays in eine Liste ausführlich vorgestellt.

1. HTML-Array definieren

Zuerst müssen wir ein HTML-Array zum Speichern von Daten definieren. Das Folgende ist ein einfaches HTML-Array-Beispiel:

<ul id="array">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>西瓜</li>
</ul>

Dieses Array enthält 4 Elemente, nämlich Äpfel, Bananen, Orangen und Wassermelonen.

2. Verwenden Sie den jQuery-Selektor, um Array-Elemente auszuwählen.

Als nächstes müssen wir den jQuery-Selektor verwenden, um Array-Elemente auszuwählen. Für das obige HTML-Array können wir den folgenden Code verwenden:

var arrayElements = $('#array li');

Diese Codezeile wählt alle li-Elemente aus und speichert sie in der Variablen arrayElements.

3. Durchlaufen Sie die Array-Elemente und konvertieren Sie sie in eine Liste.

Als nächstes müssen wir über die Array-Elemente iterieren und sie in eine Liste konvertieren Liste. Wir können es mit dem folgenden Code machen:

var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

Zuerst erstellen wir ein leeres Listenelement. Dann verwenden wir die Methode every(), um die ausgewählten li-Elemente zu durchlaufen. In der Schleife erstellen wir für jedes li-Element ein neues Listenelement und fügen seinen Textinhalt zum Listenelement hinzu. Abschließend fügen wir die Listenelemente zum Listenelement hinzu.

4. Original-Array ersetzen

Zuletzt müssen wir das ursprüngliche HTML-Array durch die gerade erstellte Liste ersetzen. Dies können wir mit dem folgenden Code erreichen:

$('#array').replaceWith(listElements);

Dieser Code wählt das ursprüngliche HTML-Array aus und ersetzt es durch das gerade erstellte Listenelement.

Der vollständige Code lautet wie folgt:

var arrayElements = $('#array li');
var listElements = $('<ul>');

arrayElements.each(function() {
  var listItem = $('<li>').append($(this).text());
  listElements.append(listItem);
});

$('#array').replaceWith(listElements);

Auf diese Weise haben wir das HTML-Array erfolgreich in eine benutzerfreundliche Liste umgewandelt und dem Benutzer präsentiert.

Das obige ist der detaillierte Inhalt vonHTML-Array zum Auflisten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!