jQuery - eq (метод)

Статья, в которой рассматривается метод библиотеки jQuery .eq().

Назначение метода .eq()

Метод .eq(index) предназначен для выбора элемента с указанным индексом из текущего набора. Отсчёт элементов в наборе ведётся с нуля. Значение индекса (index) можно задавать как с помощью положительного числа (отсчёт элемента ведётся с начала), так и с помощью отрицательного числа (отсчёт элемента ведётся с конца). В качестве результата данный метод возвращает объект jQuery, который может состоять либо из одного элемента (если элемент с указанным индексом существует), либо оставаться пустым (если элемент с указанным индексом не существует).

Примеры использования метода .eq()

Работу с методом .eq() рассмотрим на следующих примерах:

1. Создадим список ul, состоящий из 5 элементов li.

   <ul id="myList">
     <li>1 пункт</li>
     <li>2 пункт</li>
     <li>3 пункт</li>
     <li>4 пункт</li>
     <li>5 пункт</li>
   </ul>
   

2. Выберем все элементы li, находящиеся в элементе ul с id="myList".

   // переменная, хранящая ссылку на объект jQuery, который содержит выбранные в соответствии с селектором элементы (первоначальная выборка)
   var elements = $("ul#myList > li");
   // --> в качестве результата получим объект jQuery, содержащий своём наборе 5 элементов.
   

3. Выберем из первоначальной выборки элемент, который имеет индекс 2.

   var element3 = elements.eq(2);
   //или без использования переменной elements
   $("ul#myList > li").eq(2);
   // --> в качестве результата получим объект jQuery, содержащий в своём наборе элемент <li>3 пункт</li>.
   

4. Выберем из первоначальной выборки предпоследний элемент.

   var element3 = elements.eq(-2);
   //или без использования переменной elements
   $("ul#myList > li").eq(-2);
   // --> в качестве результата получим объект jQuery, содержащий в своём наборе элемент <li>4 пункт</li>.
   

5. Выберем из первоначальной выборки элемент, который имеет индекс 5.

   var element5 = elements.eq(5);
   //или без использования переменной elements
   $("ul#myList > li").eq(5);
   // --> в качестве результата получим объект jQuery, не содержащий в своём наборе элементы.
   

6. Вывести сообщение в консоль о том содержит ли объект jQuery элемент с индексом 3 или нет.

   if ($("ul#myList > li").eq(3).length == 1) {
     console.log("Набор содержит элемент с индексом 3");
   }
   else {
     console.log("Набор не содержит элемент с индексом 3");
   }
   // --> в качестве результата увидим в консоли сообщение: Набор содержит элемент с индексом 3.
   

7. Вывести сообщение в консоль о том, содержит ли объект jQuery элемент с индексом 5 или нет.

   if ($("ul#myList > li").eq(5).length == 1) {
     console.log("Набор содержит элемент с индексом 5");
   }
   else {
     console.log("Набор не содержит элемент с индексом 5");
   }
   // --> в качестве результата увидим в консоли сообщение: Набор не содержит элемент с индексом 5.