Konvertieren Sie das JQuery-Array in eine Listensammlung

In der Front-End-Entwicklung verwenden wir häufig die jQuery-Bibliothek, um einige Vorgänge zu vereinfachen, und das Konvertieren eines Arrays in eine Listensammlung ist ebenfalls einer der häufigsten Vorgänge. In diesem Artikel wird erläutert, wie Sie mit jQuery ein Array in eine Listensammlung konvertieren.

1. Verwenden Sie die Methode jQuery.each()

Die Methode jQuery.each() kann das Array durchlaufen und jedes Element einer neuen Listensammlung hinzufügen. Das Folgende ist ein Beispielcode:

var arr = [1, 2, 3, 4, 5];
var list = $('<ul>'); // 创建一个空的<ul>元素
$.each(arr, function(index, value) {
  var li = $('<li>').text(value); // 创建一个<li>元素，并将数组中的值作为文本内容添加到<li>中
  list.append(li); // 将<li>添加到<ul>中
});
$('body').append(list); // 将<ul>添加到页面中

Im obigen Code erstellen wir zuerst ein leeres ul-Element und verwenden dann die Methode every(), um das Array zu durchlaufen. Erstellen Sie während des Durchlaufvorgangs ein li-Element und verwenden Sie den Wert in Das Array as Der Textinhalt wird zum li hinzugefügt und schließlich wird das li zum ul-Element hinzugefügt. Schließlich fügen wir der Seite das ul-Element hinzu.

2. Verwenden Sie die Methode jQuery.map()

Die Methode jQuery.map() kann ein Array in ein neues Array oder Objekt konvertieren. Mit dieser Methode können wir jedes Element im Array in ein Li-Element konvertieren und diese Li-Elemente dann einer neuen Listensammlung hinzufügen. Das Folgende ist der Beispielcode:

var arr = [1, 2, 3, 4, 5];
var listItems = $.map(arr, function(value) {
  return $('<li>').text(value);
});
var list = $('<ul>').append(listItems);
$('body').append(list);

Im obigen Code verwenden wir zunächst die Methode map(), um jedes Element im Array in ein Li-Element zu konvertieren und diese Li-Elemente in einem neuen Array zu speichern. Anschließend erstellen wir ein leeres ul-Element und fügen jedes li-Element im Array zum ul-Element hinzu. Schließlich fügen wir der Seite das ul-Element hinzu.

3. Verwenden Sie jQuery, um die Template-Engine zu implementieren

jQuery kann Arrays über Template-Engines in Listensammlungen konvertieren. Wir können eine Template-Engine verwenden, um jedes Array-Element in einen HTML-String umzuwandeln und diese HTML-Strings einer neuen Listensammlung hinzuzufügen. Der Vorteil der Verwendung einer Template-Engine besteht darin, dass Sie den ausgegebenen HTML-Inhalt flexibler steuern können. Das Folgende ist ein Beispielcode:

var arr = [1, 2, 3, 4, 5];
var template = '<li>{value}</li>'; // 模板字符串
var listItems = $.map(arr, function(value) {
  return template.replace('{value}', value); // 使用模板字符串替换值
});
var list = $('<ul>').append(listItems);
$('body').append(list);

Im obigen Code definieren wir eine Vorlagenzeichenfolge und verwenden die Methode „map()“, um jedes Element im Array durch die Wertvariable in der Vorlagenzeichenfolge zu ersetzen. Anschließend erstellen wir mithilfe der von der Vorlage generierten HTML-Zeichenfolge eine neue Listensammlung und fügen sie der Seite hinzu.

Zusammenfassung

In der Frontend-Entwicklung ist das Konvertieren eines Arrays in eine Listensammlung einer der häufigsten Vorgänge. In diesem Artikel wird erläutert, wie Sie die every()-Methode, die map()-Methode und die Template-Engine von jQuery verwenden, um diesen Vorgang auszuführen. Mit jQuery können wir Array-Daten bequemer verarbeiten und schnell in HTML-Elemente umwandeln.

Das obige ist der detaillierte Inhalt vonKonvertieren Sie das JQuery-Array in eine Listensammlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!