jQuery / Method / .get() - Retrieve Selected Elements as an Array

jQuery's .get(index) retrieves one DOM (Document Object Model) element from a selection, while .get() without an argument returns all selected elements in a plain JavaScript array. Neither result is a jQuery object, which changes the methods available afterward. Indices start at zero; negative indices count backward from the end.

Distinguish get, eq and bracket access

The two forms in the .get() API serve different needs when combining native DOM APIs with jQuery. Retrieve an element with .get(0) to use classList or textContent. Keep a jQuery object with .eq(0) to continue chaining .addClass() or .text().

An index describes a position in the current jQuery collection, not a sibling position within a parent. With three elements, valid nonnegative indices are 0, 1 and 2; -1 means last and -3 means first. Both 3 and -4 are outside the collection. Bracket access with [-1] does not count from the end as .get(-1) does.

Read one element and the complete array

Save the entire code as UTF-8 in get-demo.html and open it in a browser. Internet is needed to load the official jQuery file 4.0.0 from its content delivery network (CDN), without package installation. Selection, adding, emptying, reset and the array comparison below were executed with 3.7.1 and 4.0.0.

The example uses native classList.add() on the result of .get(index) to highlight its background. JavaScript map() reads textContent from each node in the .get() array. The report uses .text() rather than inserting 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>

Initially, Alpha is highlighted:

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

1. Choose Index 1 to highlight Beta, the second element.
2. Choose -1 to select Gamma.
3. Press Add Delta while -1 is selected. Count becomes 4 and the last element is Delta. Repeating the button does not add another Delta.
4. Choose 9. The first line becomes get(9)=undefined and no item is highlighted. The full array and count are still reported.
5. Empty list makes count 0 and leaves nothing after array=. Selecting -1 or 0 also returns undefined.
6. Reset restores the three items and index 0. Read rereads the current conditions.

read() makes a fresh selection each time, so it includes the added Delta. Do not expect an earlier saved jQuery collection or array to grow automatically when the document changes.

Changing an array differs from changing its nodes

.get() creates an array without cloning DOM nodes. Run this complete fragment in the developer tools Console. It uses two temporary elements that are not inserted into the document and cleans them up at the end.

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() reorders only the returned array. The original jQuery collection still has One first. However, the array's first element is the same node as the original collection's second element. Changing its textContent to Changed is therefore visible through the original collection too. A separate array is not a separate node copy. .toArray() also expresses conversion of the entire collection to an array.

Handle missing elements and method confusion

Reading .classList or .textContent on undefined throws an error. Check for undefined before using a native API, as in the example. .get(0).addClass() is also wrong because a DOM element does not have that jQuery method. Continue with .eq(0).addClass(), or wrap the extracted element in $(element).

.get() retrieves DOM elements from a jQuery object without making a network request. It differs from $.get(url), which performs an HTTP request. For unexpected results, check selector scope, collection length, zero-based indexing and whether a changed document needs a fresh query.