jQuery / Methode / .get() - Ausgewählte Elemente als Array abrufen

jQuerys .get(index) liefert ein DOM-Element (Document Object Model) aus der Auswahl. .get() ohne Argument liefert alle Elemente als normales JavaScript-Array. Beide Ergebnisse sind keine jQuery-Objekte, daher ändern sich die verfügbaren Methoden. Indizes beginnen bei null; negative Werte zählen vom Ende.

get, eq und Klammerzugriff unterscheiden

Die beiden Formen der .get()-API helfen beim Kombinieren nativer DOM-APIs mit jQuery. Für classList oder textContent holen Sie ein Element mit .get(0). Für weitere .addClass()- oder .text()-Aufrufe behalten Sie mit .eq(0) ein jQuery-Objekt.

Der Index beschreibt die Position in der aktuellen jQuery-Menge, nicht die Geschwisterposition im Elternteil. Bei drei Elementen gelten 0, 1 und 2; -1 ist das letzte, -3 das erste. 3 und -4 liegen außerhalb. Der Zugriff [-1] zählt anders als .get(-1) nicht vom Ende.

Ein Element und das ganze Array prüfen

Speichern Sie alles in UTF-8 als get-demo.html und öffnen Sie es im Browser. Zum Laden der offiziellen jQuery-Datei 4.0.0 vom Content Delivery Network (CDN) brauchen Sie Internet, aber keine Paketinstallation. Auswahl, Hinzufügen, leere Liste, Reset und der Arrayvergleich unten wurden mit 3.7.1 und 4.0.0 ausgeführt.

Das Beispiel nutzt natives classList.add() am Ergebnis von .get(index), um den Hintergrund hervorzuheben. JavaScripts map() sammelt textContent der Knoten aus dem .get()-Array. Der Bericht verwendet .text() statt HTML einzufügen.

<!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>

Anfangs ist Alpha hervorgehoben:

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

1. Wählen Sie Index 1 für Beta, das zweite Element.
2. -1 wählt Gamma.
3. Drücken Sie dabei Add Delta: count wird 4 und Delta das letzte Element. Wiederholen erzeugt kein zweites Delta.
4. 9 ergibt in der ersten Zeile get(9)=undefined ohne Hervorhebung. Array und Anzahl bleiben sichtbar.
5. Empty list setzt count auf 0 und lässt array= leer. Auch -1 oder 0 ergeben undefined.
6. Reset stellt die drei Einträge und Index 0 wieder her. Read liest die aktuellen Bedingungen erneut.

read() wählt jedes Mal neu aus und erfasst daher das hinzugefügte Delta. Erwarten Sie keine automatische Vergrößerung einer vorher gespeicherten jQuery-Menge oder eines Arrays bei Dokumentänderungen.

Arrayänderung und Knotenänderung unterscheiden

.get() erstellt ein Array, klont aber keine DOM-Knoten. Führen Sie diesen vollständigen Teilcode in der Entwicklerkonsole aus. Er verwendet zwei temporäre, nicht eingefügte Elemente und bereinigt sie am Ende.

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() kehrt nur das Ergebnisarray um. Die ursprüngliche jQuery-Menge hat weiterhin One zuerst. Das erste Arrayelement ist aber derselbe Knoten wie das zweite Element der ursprünglichen Menge. Sein textContent wird zu Changed und ist auch über die ursprüngliche Menge verändert. Ein getrenntes Array ist keine Knotenkopie. Für das gesamte Array steht auch .toArray() zur Verfügung.

Fehlende Elemente und Methodenverwechslungen behandeln

.classList oder .textContent von undefined zu lesen führt zum Fehler. Prüfen Sie wie im Beispiel auf undefined, bevor Sie native APIs verwenden. Auch .get(0).addClass() ist falsch, da ein DOM-Element diese jQuery-Methode nicht besitzt. Nutzen Sie .eq(0).addClass() oder umschließen Sie das entnommene Element mit $(element).

.get() holt DOM-Elemente aus einem jQuery-Objekt ohne Netzwerkanfrage. Es unterscheidet sich von $.get(url) für HTTP-Anfragen. Prüfen Sie bei unerwarteten Ergebnissen Selektorbereich, length der Menge, nullbasierte Indizes und die nötige Neuauswahl nach dynamischen Änderungen.