eq селекторверсия устаревшая: 3.4
Описание: Выбрать элемент с индексом n в наборе совпадений.
-
версия добавлена: 1.0jQuery( ":eq(index)" )
index: Индекс элемента для соответствия, нумерация с нуля.
-
версия добавлена: 1.8jQuery( ":eq(-index)" )
indexFromEnd: Индекс элемента для соответствия, нумерация с конца, начиная с последнего элемента, нумерация с нуля.
Начиная с jQuery 3.4, псевдокласс :eq устарел. Удалите его из своих селекторов и отфильтруйте результаты позже, используя .eq().
Селекторы, связанные с индексом (:eq(), :lt(), :gt(), :even, :odd ) фильтруют набор элементов, которые соответствуют выражениям, предшествующим им. Они сужают набор в зависимости от порядка элементов в этом наборе. Например, если элементы сначала выбираются с помощью селектора класса (.myclass) и возвращаются четыре элемента, этим элементам присваиваются индексы 0 по 3 для целей этих селекторов.
Обратите внимание, что, поскольку массивы JavaScript используют нумерацию с нуля, эти селекторы отражают этот факт. Вот почему $( ".myclass:eq(1)" ) выбирает второй элемент в документе с классом myclass, а не первый. В отличие от этого, :nth-child(n) использует нумерацию с единицы, чтобы соответствовать спецификации CSS.
До jQuery 1.8 селектор :eq(index) не принимал отрицательное значение для index (хотя метод .eq(index) это делал).
Дополнительные примечания:
- Поскольку
:eq()является расширением jQuery и не входит в спецификацию CSS, запросы с использованием:eq()не могут воспользоваться повышением производительности, предоставляемым методом native DOMquerySelectorAll(). Для лучшей производительности в современных браузерах используйте$("your-pure-css-selector").eq(index)вместо этого.
Примеры:
Найти третий td.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>eq demo</title> <script src="https://code.jquery.com/jquery-3.7.0.js"></script> </head> <body> <table border="1"> <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr> <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr> <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr> </table> <script> $( "td:eq( 2 )" ).css( "color", "red" ); </script> </body> </html>
Демо:
Применить три различных стиля к элементам списка, чтобы продемонстрировать, что :eq() предназначен для выбора одного элемента, а :nth-child() или :eq() в циклической конструкции, такой как .each(), могут выбрать несколько элементов.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<ul class="nav">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
</ul>
<script>
// Applies yellow background color to a single <li>
$( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );
// Applies italics to text of the second <li> within each <ul class="nav">
$( "ul.nav" ).each(function( index ) {
$( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );
});
// Applies red text color to descendants of <ul class="nav">
// for each <li> that is the second child of its parent
$( "ul.nav li:nth-child(2)" ).css( "color", "red" );
</script>
</body>
</html> Демо:
Добавить класс к списку 2, элементу 2, нацелившись на предпоследний <li>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<style>
.foo {
color: blue;
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<ul class="nav">
<li>List 1, item 1</li>
<li>List 1, item 2</li>
<li>List 1, item 3</li>
</ul>
<ul class="nav">
<li>List 2, item 1</li>
<li>List 2, item 2</li>
<li>List 2, item 3</li>
</ul>
<script>
$( "li:eq(-2)" ).addClass( "foo" )
</script>
</body>
</html> 
