jQuery: Выбор элементов по классу (Урок 6)

Выбор элементов по классу в jQuery отличается от выбора по ID. ID элемента уникален на странице, поэтому выбор по ID возвращает один элемент, подобно работе с обычной строковой переменной. Классы же могут быть присвоены нескольким элементам, и выбор по классу возвращает массив элементов.

Работа с массивом элементов

Создадим несколько div-элементов и один p-элемент с классом «test»:

<div class="test">Тест 1</div>
<div class="test">Тест 2</div>
<div class="test">Тест 3</div>
<p class="test">Тест 4</p>

Для выбора элементов с классом «test» используем селектор $(‘.test’). Это вернет массив из четырех элементов. Перебирать этот массив нужно в цикле:

var test = $('.test');
for (var i = 0; i < test.length; i++) {
  test.eq(i).css('color', 'red'); 
}

В этом коде:

• $(‘.test’) выбирает все элементы с классом «test».
• test.length возвращает количество элементов в массиве.
• test.eq(i) возвращает i-й элемент массива. Это предпочтительнее, чем обращение по индексу в квадратных скобках (test[i]).
• css(‘color’, ‘red’) устанавливает цвет текста выбранного элемента в красный.

В результате, текст во всех четырех элементах станет красным.

Использование setTimeout

Функцию setTimeout можно использовать с jQuery для работы с элементами, подобранными по классам. Например, можно установить цвет текста первому элементу с классом «test» в зелёный через 2 секунды:

setTimeout(function(){
  $('.test:first').css('color', 'green');
}, 2000);

Здесь:

• $(‘.test:first’) выбирает первый элемент с классом «test». :first — псевдоселектор, выбирающий только первый элемент из множества.
• css(‘color’, ‘green’) устанавливает цвет текста в зелёный.
• 2000 — задержка в миллисекундах (2 секунды).

Важно правильно использовать кавычки в коде, особенно при использовании jQuery-селекторов внутри функций JavaScript (например, setTimeout), чтобы избежать конфликтов.

При работе с классами в jQuery помните, что запрос по классу может вернуть несколько элементов, образующих массив. Необходимо использовать циклы для обработки каждого элемента массива. Функции jQuery можно использовать в различных контекстах, включая функции таймеров, например, setTimeout. Правильное использование кавычек в коде крайне важно.