jQuery / Méthode / .get() - Récupérer les éléments sélectionnés dans un tableau

Dans jQuery, .get(index) extrait un élément du modèle objet du document, DOM, depuis la sélection. .get() sans argument renvoie tous les éléments dans un tableau JavaScript ordinaire. Aucun résultat n'est un objet jQuery, ce qui change les méthodes disponibles ensuite. Les indices commencent à zéro ; les valeurs négatives comptent depuis la fin.

Distinguer get, eq et les crochets

Les deux formes de l'API .get() évitent de confondre API DOM natives et jQuery. Pour classList ou textContent, extrayez l'élément avec .get(0). Pour continuer avec .addClass() ou .text(), gardez un objet jQuery avec .eq(0).

L'indice vise la collection jQuery actuelle, pas le rang parmi les enfants d'un parent. Pour trois éléments, 0, 1 et 2 sont valides ; -1 signifie le dernier et -3 le premier. 3 et -4 sont hors limites. Les crochets [-1] ne comptent pas depuis la fin comme .get(-1).

Vérifier un élément et le tableau complet

Enregistrez tout le code en UTF-8 dans get-demo.html et ouvrez-le dans un navigateur. Internet permet de charger le fichier officiel jQuery 4.0.0 depuis le réseau de diffusion de contenu, CDN, sans installer de paquet. Sélection, ajout, liste vide, Reset et comparaison du tableau ont été exécutés avec 3.7.1 et 4.0.0.

L'exemple applique le classList.add() natif au résultat de .get(index) pour le mettre en évidence. Le map() JavaScript collecte textContent pour chaque nœud du tableau .get(). Le résultat utilise .text(), sans insertion HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read DOM elements with get</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; }
    .picked { background: #d9f4ef; font-weight: bold; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Read a DOM element or an array</h1>
  <label for="index">Index:</label>
  <select id="index"><option>0</option><option>1</option><option>-1</option><option>9</option></select>
  <button type="button" id="read">Read</button>
  <button type="button" id="add">Add Delta</button>
  <button type="button" id="empty">Empty list</button>
  <button type="button" id="reset">Reset</button>
  <ul id="items"><li>Alpha</li><li>Beta</li><li>Gamma</li></ul>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const initial = "<li>Alpha</li><li>Beta</li><li>Gamma</li>";
      function read() {
        const $items = $("#items > li");
        const index = Number($("#index").val());
        const element = $items.get(index);
        const elements = $items.get();
        $items.removeClass("picked");
        if (element !== undefined) element.classList.add("picked");
        const label = element === undefined ? "undefined" : element.textContent;
        const labels = elements.map(node => node.textContent).join(", ");
        $("#result").text(`get(${index})=${label}\narray=${labels}\ncount=${elements.length}`);
      }
      $("#read, #index").on("click change", read);
      $("#add").on("click", function () {
        if (!$("#items > li").filter(function () { return this.textContent === "Delta"; }).length) {
          $("<li>").text("Delta").appendTo("#items");
        }
        read();
      });
      $("#empty").on("click", function () { $("#items").empty(); read(); });
      $("#reset").on("click", function () {
        $("#items").html(initial);
        $("#index").val("0");
        read();
      });
      read();
    });
  </script>
</body>
</html>

Initialement, Alpha est mis en évidence :

get(0)=Alpha
array=Alpha, Beta, Gamma
count=3

1. Choisissez Index 1 pour Beta, le deuxième élément.
2. -1 sélectionne Gamma.
3. Appuyez alors sur Add Delta : count devient 4 et le dernier élément Delta. Répéter n'ajoute pas de doublon.
4. 9 donne get(9)=undefined en première ligne, sans élément mis en évidence. Tableau complet et nombre restent affichés.
5. Empty list donne count 0 et rien après array=. -1 ou 0 renvoient aussi undefined.
6. Reset restaure les trois éléments et l'indice 0. Read relit les conditions actuelles.

read() refait la sélection à chaque exécution et voit donc Delta ajouté. Une collection jQuery ou un tableau déjà conservé ne s'agrandit pas automatiquement avec le document.

Modifier le tableau ou modifier ses nœuds

.get() crée un tableau, sans cloner les nœuds DOM. Exécutez ce fragment complet dans la Console des outils de développement. Il utilise deux éléments temporaires non insérés puis les nettoie.

const $items = $("<li>One</li><li>Two</li>");
const elements = $items.get();
elements.reverse();
elements[0].textContent = "Changed";
console.log(`array=${elements.map(node => node.textContent).join(",")}`);
console.log(`jQuery=${$items.get().map(node => node.textContent).join(",")}`);
console.log(`same node=${elements[0] === $items.get(1)}`);
console.log(`get(9)=${typeof $items.get(9)} | eq(9).length=${$items.eq(9).length}`);
console.log(`get(-1)=${$items.get(-1).textContent} | bracket[-1]=${typeof $items[-1]}`);
$items.remove();

array=Changed,One
jQuery=One,Changed
same node=true
get(9)=undefined | eq(9).length=0
get(-1)=Changed | bracket[-1]=undefined

reverse() inverse seulement le tableau renvoyé. La collection jQuery d'origine garde One en premier. Mais le premier élément du tableau est le même nœud que le deuxième de la collection. Changer son textContent en Changed modifie donc aussi la valeur lue par la collection. Tableau distinct ne signifie pas copie distincte des nœuds. .toArray() permet également d'obtenir l'ensemble sous forme de tableau.

Traiter les éléments absents et les confusions de méthodes

Lire .classList ou .textContent sur undefined produit une erreur. Vérifiez undefined avant l'API native, comme dans l'exemple. .get(0).addClass() est également incorrect : un élément DOM ne possède pas cette méthode jQuery. Utilisez .eq(0).addClass() ou enveloppez l'élément avec $(element).

.get() extrait des éléments DOM d'un objet jQuery sans requête réseau. $.get(url) effectue une requête HTTP et a un autre rôle. En cas de résultat inattendu, contrôlez portée du sélecteur, length de la collection, indices depuis zéro et nouvelle sélection après modification dynamique.