Методы .get() и .toArray()

Определение и применение

Методы извлекают обычные DOM-узлы из коллекции jQuery. Это нужно при передаче элемента в браузерный API или библиотеку, которая не принимает объект jQuery. .get(index) возвращает один узел, а .get() и .toArray() — массив всех узлов.

Синтаксис

const first = collection.get(0);
const last = collection.get(-1);
const nodes = collection.get();
const sameNodes = collection.toArray();

Параметры и возвращаемое значение

index — целое число с нуля. Отрицательное значение отсчитывает элементы с конца: -1 означает последний. Если индекс вне коллекции, результат — undefined. У пустой коллекции .get() и .toArray() возвращают пустой массив.

DOM-элемент не имеет методов .addClass() или .css(). Для него доступны свойства вроде textContent; для возврата к методам jQuery оберните узел в $(). Метод .eq() сразу возвращает коллекцию из одного элемента, а не узел.

Особенности и совместимость

Массив — новая оболочка со ссылками на те же узлы. Изменение массива через reverse() не меняет исходную коллекцию и не переставляет элементы в документе. Изменение самого узла будет видно на странице.

.get() существует с 1.0, .toArray() — с 1.4. Запись collection[0] также даёт первый узел, но отрицательный индекс в квадратных скобках не означает отсчёт с конца.

Документация

• get — jQuery API
• toArray — jQuery API

Пример использования

Массив, узел и коллекция: попробуйте сами

Поменяйте порядок массива. Исходная коллекция и список в документе сохранят А, Б, В; последний узел — В. Используется jQuery 4.0.0.

index.html

HTML

<ul>
  <li>А</li>
  <li>Б</li>
  <li>В</li>
</ul>
<pre id="result"></pre>

main.js

JavaScript

const items = $('li')
const reversed = items.toArray().reverse()
$('#result').text(
    [reversed.map((node) => node.textContent).join(', '), items.text(), items.get(-1).textContent].join(' | ')
)