.eq()

.eq( index )Возвращает: jQuery

Описание: Сокращает набор сопоставленных элементов до одного по указанному индексу.

версия добавлена: 1.1.2.eq( index )
- index
  
  Тип: Целое число
  
  Целое число, обозначающее нулевую позицию элемента.
версия добавлена: 1.4.eq( indexFromEnd )
- indexFromEnd
  
  Тип: Целое число
  
  Целое число, обозначающее позицию элемента, считая от последнего элемента в наборе.

Применяя метод к объекту jQuery, представляющему набор элементов DOM, создается новый объект jQuery, содержащий один элемент из этого набора. Указанный индекс определяет позицию этого элемента в наборе.

Рассмотрим страницу со списком:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Мы можем применить этот метод к набору элементов списка:

$( "li" ).eq( 2 ).css( "background-color", "red" );

Результат этого вызова — красный фон для элемента 3. Обратите внимание, что указанный индекс нулевой и относится к позиции элемента в объекте jQuery, а не в дереве DOM.

Отрицательное число указывает позицию, начиная с конца набора, а не с начала. Например:

$( "li" ).eq( -2 ).css( "background-color", "red" );

В этот раз элемент списка 4 покрашен в красный цвет, так как он находится на втором месте с конца набора.

Если элемент не найден по указанному индексу (нулевая позиция), метод создаёт новый объект jQuery с пустым набором и свойством length со значением 0.

$( "li" ).eq( 5 ).css( "background-color", "red" );

Здесь ни один из элементов списка не покрашен в красный цвет, поскольку .eq( 5 ) обозначает шестой элемент из пяти элементов списка.

Пример:

Сделать div с индексом 2 синим, добавив соответствующий класс.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>eq demo</title>
  <style>
  div {
    width: 60px;
    height: 60px;
    margin: 10px;
    float: left;
    border: 2px solid blue;
  }
  .blue {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );
</script>
 
</body>
</html>

.eq( index )Возвращает: jQuery

версия добавлена: 1.1.2.eq( index )

версия добавлена: 1.4.eq( indexFromEnd )

Пример:

Демо: