jQuery / Método / .get() - Obtener los elementos seleccionados como un array

En jQuery, .get(index) obtiene un elemento del modelo de objetos del documento, DOM, desde la selección. .get() sin argumentos devuelve todos los elementos en un array JavaScript normal. Ninguno es un objeto jQuery, por lo que cambian los métodos disponibles después. Los índices empiezan en cero y los negativos cuentan desde el final.

Distinguir get, eq y acceso con corchetes

Las dos formas de la API .get() ayudan a combinar las API DOM nativas con jQuery. Obtén el elemento con .get(0) para usar classList o textContent. Conserva un objeto jQuery con .eq(0) para encadenar .addClass() o .text().

El índice es una posición de la colección jQuery actual, no la posición entre hermanos de un padre. Con tres elementos son válidos 0, 1 y 2; -1 es el último y -3 el primero. 3 y -4 quedan fuera. Los corchetes [-1] no cuentan desde el final como .get(-1).

Comprobar un elemento y el array completo

Guarda el código completo en UTF-8 como get-demo.html y ábrelo en el navegador. Se necesita internet para cargar el archivo oficial de jQuery 4.0.0 desde su red de distribución de contenidos, CDN, sin instalar paquetes. Selección, adición, lista vacía, Reset y comparación del array se ejecutaron con 3.7.1 y 4.0.0.

El ejemplo usa classList.add() nativo sobre .get(index) para resaltar el fondo. map() de JavaScript recoge textContent de cada nodo del array .get(). El informe utiliza .text() sin insertar 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>

Inicialmente está resaltado Alpha:

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

1. Elige Index 1 para resaltar Beta, el segundo elemento.
2. -1 selecciona Gamma.
3. Pulsa entonces Add Delta: count pasa a 4 y el último es Delta. Repetir no añade duplicados.
4. 9 produce get(9)=undefined en la primera línea y ningún resaltado. El array completo y su cantidad siguen visibles.
5. Empty list deja count 0 y nada tras array=. Tanto -1 como 0 devuelven undefined.
6. Reset restaura los tres elementos e índice 0. Read relee las condiciones actuales.

read() selecciona de nuevo en cada ejecución, por eso detecta Delta añadido. No esperes que una colección jQuery o array guardado aumente automáticamente con los cambios del documento.

Cambiar el array y cambiar los nodos

.get() crea un array sin clonar nodos DOM. Ejecuta este fragmento completo en Console de las herramientas de desarrollo. Usa dos elementos temporales no insertados y los limpia al terminar.

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() invierte solo el array devuelto. La colección jQuery original sigue teniendo One primero. Sin embargo, el primer nodo del array es el segundo de la colección. Cambiar su textContent a Changed modifica también lo leído desde la colección. Un array independiente no es una copia de nodos. .toArray() también permite convertir toda la selección en un array.

Gestionar elementos ausentes y métodos confundidos

Leer .classList o .textContent de undefined provoca un error. Compruébalo antes de usar la API nativa, como en el ejemplo. .get(0).addClass() también es incorrecto porque un elemento DOM no tiene ese método jQuery. Usa .eq(0).addClass() o envuelve el elemento con $(element).

.get() extrae elementos DOM de un objeto jQuery sin solicitar datos por red. Es diferente de $.get(url), que realiza una petición HTTP. Si el resultado no coincide, comprueba ámbito del selector, length de la colección, índices desde cero y nueva selección tras cambios dinámicos.