Проход по элементам с одним классом в jQuery: цикл, условия

Быстрый ответ

Для перебора элементов, имеющих один и тот же класс в jQuery, используйте метод .each():

$('.class-name').each(function() {
    // Вывод текста каждого элемента с классом 'class-name'
    console.log($(this).text()); 
});

Селектор $('.class-name') выбирает все элементы с классом "class-name", а внутри цикла $(this) обозначает каждый из этих элементов, что позволяет работать с ними индивидуально.

Оптимизация кода и детализация условий

Оптимальный перебор элементов в DOM с высокой эффективностью можно реализовать, уточнив условия, что облегчает поддержку кода и улучшает его читаемость:

$('.star').each(function() {
    let rating = $(this).data('rating');
    if (rating > 4) {
        // В случае, если рейтинг превышает заданный порог
        $(this).addClass('highlight');
    } else if (rating === 4) {
        // Когда рейтинг совпадает с ожидаемым значением
        $(this).addClass('solid');
    }
});

Принцип "разделяй и властвуй" помогает улучшить читаемость и удобство поддержки кода. Если вы планируете использовать переменные, такие как $(this) и свойства data, более одного раза, то следует кэшировать их. Это позволит сократить количество запросов к DOM и увеличить производительность.

Визуализация

Представим процесс перебора элементов в виде поезда (🚂), который останавливается на станциях с определенным классом (🚉🟢):

Станции с классом: 🚉🟢  🚉🟢  🚉🟢
Движение поезда:    🚂=====>=====>=====>

Каждая станция 🚉🟢 — это DOM-элемент с определенным классом. Поезд останавливается на каждой из них для выполнения конкретных действий:

$('.class').each(function() {
    // Поезд отправляется!
    alert('Станция: ' + $(this).text());
});

Закрываются двери поезда, и он направляется к следующей станции 🚉. Приготовьтесь к поездке по классу .class! 🛤️

Vanilla JS: альтернатива jQuery

Для достижения более высокой производительности, можно использовать нативный JavaScript с методами querySelectorAll и forEach:

Array.from(document.querySelectorAll('.class-name')).forEach(function(element) {
    // Альтернативный способ без использования jQuery
    console.log(element.textContent);
});

Метод document.querySelectorAll('.class-name') возвращает NodeList, который можно преобразовать в массив с помощью Array.from() и затем перебрать его элементы с помощью forEach().

Обработка динамических элементов с помощью делегирования событий

Применение $(document).on() позволяет сохранить обработчики событий даже для динамически добавляемых элементов благодаря принципу делегирования событий:

$(document).on('click', '.dynamic-button', function() {
    // Обработка нажатия, даже если кнопка была добавлена позже
    console.log('Нажатие:', $(this).text());
});

Таким образом, события присваиваются не конкретным элементам, а document, что улучшает производительность и сохраняет функциональность для динамически создаваемых элементов.

Советы, хитрости и подводные камни

Работа с атрибутами данных и jQuery

Если вам нужно работать с атрибутами данных, то метод .data() в jQuery упрощает эту задачу:

$('.class-name').each(function() {
    let dataIndex = parseInt($(this).data('index'), 10);
    // Переменная dataIndex теперь представляет собой число
});

Подробнее об этом расскажет наш спикер на видео

Обновление содержимого элементов в режиме реального времени

Для "на лету" изменения контента элементов, вы можете использовать следующий подход:

$('.class-name').each(function() {
    if ($(this).data('status') === 'active') {
        $(this).html('Активное содержимое'); // Обновление содержимого…
    }
});

Прерывание цикла

Иногда возникает необходимость в раннем прерывании цикла. Указание return false; позволит прекратить выполнение цикла .each() до его полного завершения:

$('.class-name').each(function(index) {
    if (index === 3) {
        // Останавливаемся здесь
        return false;
    }
});

Полезные материалы

1: Подробное описание метода .each() в jQuery. 2: Основы работы с селекторами jQuery. 3: Всё, что нужно знать о методе forEach в нативном JavaScript. 4: Подробное объяснение применения this в JavaScript. 5: Статья Дэвида Уолша о применении .on() в jQuery и делегировании событий.