Для чего используется .first() в jQuery?

Сокращает набор jQuery до одного единственного элемента (первого элемента исходного набора, соответствующего заданному селектору).

.first() в jQuery

Категории: Traversing › Filtering

Сокращает набор jQuery до одного единственного элемента (первого элемента исходного набора, соответствующего заданному селектору).

Добавлено в jQuery 1.4.first( )
Метод .first() возвращает новый набор jQuery, содержащий только первый элемент исходного набора (или пустой набор, если исходный был пуст). Это более читаемая сокращённая форма записи .eq(0) — код с .first() проще понять с первого взгляда, не вспоминая, что индекс 0 означает «первый».
Парный метод — .last(), который берёт последний элемент набора; вместе они удобны, когда нужно по-разному оформить края списка, таблицы или набора шагов — например, убрать внешний отступ у первого и последнего элемента.
Оба метода не принимают аргументов и не изменяют исходный набор — как и большинство методов фильтрации в jQuery, они возвращают новый объект, а исходная переменная остаётся прежней.

Возвращаемое значение: (объект) Набор jQuery из одного элемента (или пустой набор).

Примечание:
Селектор :first даёт тот же результат ($('li:first') и $('li').first() — первый li документа), но он объявлен deprecated в jQuery 3.4 и мешает jQuery передать селектор целиком в быстрый нативный querySelectorAll(). Не путайте его с CSS-псевдоклассом :first-child, который выбирает первого ребёнка в каждом родителе.
Примечание:
.first() эквивалентен .eq(0), но читается яснее в коде.
В jQuery 3.x и 4.0:
Метод не менялся, работает без изменений в 3.7.1 и 4.0. Нативный аналог для коллекции DOM-элементов — обращение по индексу 0, например parentEl.children[0] или nodeList[0]. Подробнее про позиционные селекторы и методы — в статье селекторы jQuery.

Выделить первую строку таблицы.
```
$('table tr').first().addClass('header-row');
```
Снять подсветку со всех вкладок, кроме первой.
```
$('.tab').not($('.tab').first()).removeClass('active');
```
Сочетание с .last() — пометить крайние элементы списка шагов.
```
$('.step').first().addClass('is-first');
$('.step').last().addClass('is-last');
```
Проверить, что набор не пуст, прежде чем работать с первым элементом.
```
var $first = $('.notification').first();
if ($first.length) {
  $first.trigger('focus');
}
```