jQuery | eq () с примерами

Опубликовано: 14 Декабря, 2021

jQuery - очень мощный инструмент, который помогает нам включать различные методы обхода DOM для случайного или последовательного выбора элементов в документе. Большинство методов обхода DOM не изменяют элементы, иначе они отфильтровывают их при заданных условиях.
Метод eq () - это встроенный в jQuery метод, который используется для непосредственного поиска выбранных элементов и возвращает элемент с определенным индексом.
Синтаксис:

 $ (селектор) .eq (индекс)

Параметры: Здесь параметр «index» указывает индекс элемента.
Может быть положительным или отрицательным числом.
ЗАМЕТКА:

Номер индекса всегда начинается с 0, поэтому первое число будет иметь индекс 0 (а не 1).
Использование отрицательного числа в качестве индекса начинает отсчет индекса с конца списка.

Код jQuery для демонстрации работы метода eq ():
Код №1:
Код ниже выберет указанные элементы.

 < html >
 
< head >
    < title >GeeksForGeeks articles</ title >
    < script src=" https://ajax.googleapis.com/ajax/libs/
                 jquery/3.3.1/jquery.min.js"></ script >
    < script type = "text/javascript" >
        $(document).ready(function() {
            $(".heading").eq(0).css("color", "red");
            $(".heading").eq(2).css("color", "yellow");
        });
    </ script >
 </ head >
 
< body >
    < h1 class = "heading" >GeeksForGeeks</ h1 >
    < h2 class = "heading" >GeeksForGeeks</ h2 >
    < h3 class = "heading" >GeeksForGeeks</ h3 >
    < h4 class = "heading" >GeeksForGeeks</ h4 >
 </ body >
 
</ html > 

Выход:

Код №2:
Код ниже выберет указанные элементы с отрицательным индексом.

 < html >
 
< head >
    < title >GeeksForGeeks articles</ title >
    < script src=" https://ajax.googleapis.com/ajax/
                 libs/jquery/3.3.1/jquery.min.js"></ script >
 
    < script type = "text/javascript" >
        $(document).ready(function() {
            $(".heading").eq(-2).addClass("style");
            $(".heading").eq(-4).addClass("style");
 
        });
    </ script >
    < style >
        .style {
            color: red;
            font-family: fantasy;
            font-size: 20px;
        }
    </ style >
 </ head >
 
< body >
    < ul >
        < li class = "heading" >GeeksForGeeks</ li >
        < li class = "heading" >GeeksForGeeks</ li >
        < li class = "heading" >GeeksForGeeks</ li >
        < li class = "heading" >GeeksForGeeks</ li >
    </ ul >
 </ body >
 
</ html > 

Выход:

jQuery: eq () против get ()

.eq () возвращает его как объект jQuery, то есть элемент DOM заключен в оболочку jQuery, что означает, что он принимает функции jQuery.
.get () возвращает массив необработанных элементов DOM.

JavaScript JQuery

jQuery | eq () с примерами

РЕКОМЕНДУЕМЫЕ СТАТЬИ