Convertir la liste en tableau dans jquery-Questions et réponses frontales-php.cn

Convertir la liste en tableau dans jquery

PHPz

Libérer： 2023-05-28 12:46:08

original

694 Les gens l'ont consulté

Lorsque vous écrivez du code JavaScript avec jQuery, vous rencontrez souvent le besoin de convertir une liste en tableau. Dans cet article, nous verrons comment convertir des listes en tableaux à l'aide de certaines méthodes de jQuery afin que vous puissiez mieux les comprendre et les utiliser.

1. Utilisez la méthode map de jQuery

La méthode map de jQuery peut convertir chaque élément d'une liste en une nouvelle valeur, puis former ces nouvelles valeurs dans un nouveau tableau et le renvoyer. Par conséquent, nous pouvons utiliser la méthode map de jQuery pour convertir une liste en tableau.

L'exemple de code est le suivant :

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = $.map(list, function(item) {
  return item.textContent;
});
console.log(array);

Copier après la connexion

Dans le code ci-dessus, nous utilisons d'abord la méthode $() de jQuery pour obtenir une liste contenant tous les éléments

Nous utilisons ensuite la méthode map de jQuery pour parcourir chaque élément de la liste et utiliser son contenu (textContent) comme valeur d'élément dans le nouveau tableau. Enfin, nous imprimons le nouveau tableau sur la console.

2. Utilisez la méthode each de jQuery

En plus d'utiliser la méthode map, nous pouvons également utiliser la méthode each de jQuery pour convertir la liste en tableau. La méthode each est une méthode générale pour parcourir des tableaux et des objets. Cette méthode peut effectuer la même opération sur chaque élément de données. Contrairement à la méthode map, la méthode each ne renvoie pas un nouveau tableau, mais stocke le résultat du traitement des données dans le tableau d'origine.

L'exemple de code est le suivant :

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = [];  //创建一个空数组，用于存储处理后的结果
$.each(list, function(index, item) {
  array.push(item.textContent);
});
console.log(array);

Copier après la connexion

Dans le code ci-dessus, nous utilisons également d'abord la méthode $() de jQuery pour obtenir une liste contenant tous les éléments

Nous créons ensuite un tableau vide pour stocker les résultats traités et utilisons la méthode each pour parcourir chaque élément de la liste et placer son contenu (textContent) dans le tableau. Enfin, nous imprimons le nouveau tableau sur la console.

3. Utilisez la méthode Array.from de JavaScript

Vous pouvez également utiliser la méthode Array.from de JavaScript natif dans jQuery pour convertir une liste en tableau. Cette méthode convertit les objets de type tableau (tels que les listes de nœuds DOM) ou les objets itérables (tels que les ensembles et les cartes) en tableaux réels.

L'exemple de code est le suivant :

var list = $("ul li");  //获取 <ul> 元素中的所有 <li> 元素
var array = Array.from(list).map(function(item) {
  return item.textContent;
});
console.log(array);

Copier après la connexion

Dans le code ci-dessus, nous utilisons également d'abord la méthode $() de jQuery pour obtenir une liste contenant tous les éléments

Nous utilisons ensuite la méthode JavaScript native Array.from pour convertir la liste en tableau, et utilisons la méthode map pour parcourir le nouveau tableau, le convertissant en un tableau contenant le contenu textuel de chaque élément. Enfin, nous imprimons le nouveau tableau sur la console.

Conclusion

Grâce à l'introduction de cet article, je pense que vous avez compris comment convertir une liste en tableau en jQuery. Il convient de noter que l'utilisation de la méthode map et de chaque méthode peut effectuer un traitement plus raffiné de chaque élément de la liste, et que l'utilisation de la méthode Array.from peut facilement convertir un objet de type tableau en un véritable tableau. Par conséquent, choisir la méthode appropriée en fonction des besoins réels peut mieux améliorer l’efficacité et la lisibilité du code.

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!