jQuery / Método / .get() - Obter os elementos selecionados como um array

No jQuery, .get(index) obtém um elemento do modelo de objetos do documento, DOM, a partir da seleção. .get() sem argumento devolve todos os elementos em um array JavaScript comum. Nenhum resultado é um objeto jQuery, alterando os métodos disponíveis depois. Os índices começam em zero e os negativos contam a partir do final.

Distinguir get, eq e acesso por colchetes

As duas formas da API .get() ajudam a combinar APIs DOM nativas com jQuery. Extraia o elemento com .get(0) para classList ou textContent. Mantenha um objeto jQuery com .eq(0) para encadear .addClass() ou .text().

O índice indica a posição na coleção jQuery atual, não a ordem dos filhos de um pai. Com três elementos, 0, 1 e 2 são válidos; -1 é o último e -3 o primeiro. 3 e -4 ficam fora. Colchetes [-1] não contam do final como .get(-1).

Verificar um elemento e o array completo

Salve todo o código em UTF-8 como get-demo.html e abra no navegador. É preciso internet para carregar o arquivo oficial do jQuery 4.0.0 pela rede de distribuição de conteúdo, CDN, sem instalar pacotes. Seleção, adição, lista vazia, Reset e comparação do array foram executados com 3.7.1 e 4.0.0.

O exemplo usa classList.add() nativo no resultado de .get(index) para destacar o fundo. O map() do JavaScript reúne textContent dos nós do array .get(). O relatório usa .text() sem inserir 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 Alpha está destacado:

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

1. Escolha Index 1 para Beta, o segundo elemento.
2. -1 seleciona Gamma.
3. Pressione então Add Delta: count vira 4 e o último elemento é Delta. Repetir não duplica Delta.
4. 9 mostra get(9)=undefined na primeira linha, sem destaque. O array completo e sua quantidade continuam visíveis.
5. Empty list deixa count 0 e nada depois de array=. -1 ou 0 também devolvem undefined.
6. Reset restaura os três itens e índice 0. Read lê novamente as condições atuais.

read() refaz a seleção a cada execução, incluindo Delta adicionado. Não espere que uma coleção jQuery ou um array guardado aumente automaticamente conforme o documento muda.

Alterar o array difere de alterar os nós

.get() cria um array sem clonar nós DOM. Execute este trecho completo no Console das ferramentas de desenvolvimento. Ele usa dois elementos temporários não inseridos e os limpa ao final.

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() inverte apenas o array devolvido. A coleção jQuery original continua com One primeiro. Porém, o primeiro nó do array é o segundo da coleção. Alterar seu textContent para Changed muda também a leitura pela coleção. Um array separado não é uma cópia dos nós. .toArray() também converte a seleção inteira em array.

Tratar elementos ausentes e confusão de métodos

Ler .classList ou .textContent de undefined causa erro. Verifique undefined antes da API nativa, como no exemplo. .get(0).addClass() também é incorreto porque o elemento DOM não possui esse método jQuery. Use .eq(0).addClass() ou envolva o elemento em $(element).

.get() extrai elementos DOM de um objeto jQuery sem requisição de rede. É diferente de $.get(url), que faz uma requisição HTTP. Para resultados inesperados, confira escopo do seletor, length da coleção, índices a partir de zero e nova seleção após mudanças dinâmicas.