objet jquery en tableau tableau d'objets

Avant-propos

Dans le développement Web, jQuery, une excellente bibliothèque JavaScript, est souvent utilisée pour faire fonctionner le modèle objet de document (DOM). jQuery fournit une série de fonctions pour simplifier nos opérations, telles que la sélection d'éléments, l'ajout d'événements, etc. Cependant, lorsque nous travaillons avec jQuery, nous devons parfois convertir des objets jQuery en tableaux JavaScript ou en tableaux d'objets. Car dans certains cas, nous devons parcourir les éléments de l'objet jQuery et les modifier.

Cet article présente principalement comment les objets jQuery sont convertis en tableaux et tableaux d'objets, et fournit quelques scénarios d'application pratiques pour référence aux lecteurs.

Convertir un objet jQuery en tableau

Dans jQuery, vous pouvez utiliser la fonction toArray() pour convertir un objet jQuery en tableau. Cette fonction convertira tous les éléments de l'objet jQuery en un tableau JavaScript et renverra le tableau.

Par exemple, supposons que nous ayons le fragment HTML suivant :

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

Nous pouvons utiliser le code suivant pour obtenir tous les éléments li de cette page :

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

Maintenant, $myListItems est un objet jQuery. Nous pouvons utiliser la fonction console.log() pour afficher son contenu :

console.log($myListItems);

Dans la console, vous pouvez voir le résultat comme suit :

[li, li, li]

Cette sortie indique que $myListItems est un objet jQuery contenant trois éléments li, nous pouvons convertissez-le en tableau JavaScript à l'aide de la fonction toArray() :

var myListItemsArray = $myListItems.toArray();

Désormais, myListItemsArray est un tableau JavaScript contenant trois éléments li.

Convertir un objet jQuery en tableau d'objets

En plus de convertir un objet jQuery en tableau JavaScript, nous devons aussi parfois le convertir en tableau d'objets. Pour atteindre cet objectif, nous pouvons utiliser la fonction map(). La fonction map() parcourra l'objet jQuery et exécutera une fonction de rappel sur chaque élément, puis combinera les valeurs de retour de chaque élément dans un nouveau tableau et renverra ce tableau.

Considérez un exemple pratique ci-dessous. Supposons que nous ayons un objet JSON contenant des données utilisateur comme celle-ci :

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}
];

Maintenant, nous devons créer une liste HTML contenant les noms d'utilisateurs et leurs âges en fonction de ces données. Nous pouvons utiliser jQuery pour créer cette liste :

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

Maintenant, nous avons créé une liste contenant les données utilisateur. Nous pouvons ajouter cet élément de liste au document :

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

Dans cet exemple, nous utilisons la fonction map() pour convertir les données utilisateur en un tableau d'objets, puis créons une liste HTML contenant les informations utilisateur.

Résumé

Cet article explique comment convertir des objets jQuery en tableaux JavaScript et tableaux d'objets. Nous pouvons convertir des objets jQuery en tableaux JavaScript à l'aide de la fonction toArray() et convertir des objets jQuery en tableaux d'objets à l'aide de la fonction map(). Ces techniques sont utiles pour traiter des problèmes courants dans le développement Web, tels que la traversée et la modification d'éléments DOM et le traitement des données JSON.

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!