Convertir le tableau jquery en collection de listes

Dans le développement front-end, nous utilisons souvent la bibliothèque jQuery pour simplifier certaines opérations, et la conversion d'un tableau en collection de listes est également l'une des opérations courantes. Cet article explique comment utiliser jQuery pour convertir un tableau en une collection de listes.

1. Utilisez la méthode jQuery.each()

La méthode jQuery.each() peut parcourir le tableau et ajouter chaque élément à une nouvelle collection de listes. Voici un exemple de code :

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>添加到页面中

Dans le code ci-dessus, nous créons d'abord un élément ul vide, puis utilisons la méthode each() pour parcourir le tableau. Pendant le processus de traversée, créons un élément li et utilisons la valeur dans. le tableau as Le contenu du texte est ajouté au li et enfin le li est ajouté à l'élément ul. Enfin, nous ajoutons l'élément ul à la page.

2. Utilisez la méthode jQuery.map()

La méthode jQuery.map() peut convertir un tableau en un nouveau tableau ou un nouveau objet. Nous pouvons utiliser cette méthode pour convertir chaque élément du tableau en élément li, puis ajouter ces éléments li à une nouvelle collection de listes. Voici l'exemple de code :

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);

Dans le code ci-dessus, nous utilisons d'abord la méthode map() pour convertir chaque élément du tableau en un élément li, et enregistrons ces éléments li dans un nouveau tableau. Nous créons ensuite un élément ul vide et ajoutons chaque élément li du tableau à l'élément ul. Enfin, nous ajoutons l'élément ul à la page.

3. Utilisez jQuery pour implémenter un moteur de modèles

jQuery peut convertir des tableaux en collections de listes via des moteurs de modèles. Nous pouvons utiliser un moteur de modèle pour convertir chaque élément du tableau en une chaîne HTML et ajouter ces chaînes HTML à une nouvelle collection de listes. L'avantage d'utiliser un moteur de modèles est que vous pouvez contrôler de manière plus flexible le contenu HTML de sortie. Voici un exemple de code :

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);

Dans le code ci-dessus, nous définissons une chaîne de modèle et utilisons la méthode map() pour remplacer chaque élément du tableau par la variable de valeur dans la chaîne de modèle. Nous créons ensuite une nouvelle collection de listes en utilisant la chaîne HTML générée par le modèle et l'ajoutons à la page.

Résumé

Dans le développement front-end, la conversion d'un tableau en une collection de listes est l'une des opérations les plus courantes. Cet article explique comment utiliser la méthode each(), la méthode map() et le moteur de modèles de jQuery pour réaliser cette opération. L'utilisation de jQuery nous permet de traiter les données du tableau plus facilement et de les convertir rapidement en éléments HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!