jQuery селектор :even

Определение и применение

jQuery селектор :even выбирает каждый элемент с четным индексом (например: 0, 2, 4 и так далее), или другими словами выбирает каждый нечетный HTML элемент в документе (например: 1, 3, 5 и так далее).

Для того, чтобы произвести выбор всех четных элементов (элементов с нечетным индексом - 1, 3, 5 и так далее), то необходимо воспользоваться jQuery селектором :odd.

jQuery синтаксис:

$("selector:even")

Селектор в CSS

Добавлен в версии jQuery

Современная альтернатива

Селектор устарел с jQuery 3.4. Получите коллекцию и вызовите .even(), доступный с 3.5. Нумерация по-прежнему начинается с нуля.

Пример старого кода

Селектор :even — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

main.js

JavaScript

$(document).ready(function () {
    $('tr:even').css('background-color', 'orangered') // выбираем каждый нечетный элемент <tr> в документе
    $('tr:odd').css('background-color', 'orange') // выбираем каждый четный элемент <tr> в документе
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :even мы выбрали и стилизовали каждый нечетный элемент <tr> (строка таблицы) в документе, а с помощью селектора :odd мы выбрали каждый четный элемент <tr>.