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

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

Список классов, присвоенных элементу, можно получить с помощью метода .attr('class') в jQuery. Этот метод возвращает строку, включающую все классы элемента.

var classes = $('.element').attr('class');
console.log(classes); // "class1 class2 class3"

Вы можете работать с этой строкой напрямую или преобразовать её в массив при помощи .split(/\s+/), для того чтобы взаимодействовать с каждым классом индивидуально.

var classList = $('.element').attr('class').split(/\s+/);
console.log(classList); // ["class1", "class2", "class3"] // Какой успех! 🎉

Регулярное выражение \s+ делит классы по пробелам, что обеспечивает правильное разделение даже при наличии нескольких пробелов.

Продвинутые приемы: углубленная работа с классами

Прямой доступ через classList

Для расширения возможности работы с классами используйте свойство classList:

var domElement = $('.element')[0];
var classArray = Array.from(domElement.classList);  // Работаем с классами без jQuery! ✨

У свойства classList есть удобные методы, например .add(), .remove() и .toggle(). Для проверки наличия класса используйте .contains(). Это альтернатива .hasClass():

if (domElement.classList.contains('someClass')) {
    // Класс найден!
}

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

Динамическая проверка классов

Вы можете динамически получать информацию о классах элемента, используя свойство .prop("classList"):

var propClassList = $('.element').prop('classList');
if (propClassList.contains('someClass')) {
    // Класс есть
}

Для поддержки старых браузеров используйте полифиллы classList с сайта MDN или преобразуйте classList в массив вот так:

var classListArray = Array.prototype.slice.call($('.element').prop('classList', []));

Индивидуальное решение: плагины jQuery

Можно создать свой плагин jQuery для получения массива уникальных классов:

$.fn.classes = function(callback) {
    return this.each(function() {
        var classList = $(this).attr('class') ? $(this).attr('class').split(/\s+/) : [];
        if (callback) {
            $.each(classList, function(index, className) {
                callback.call(this, className);
            });
        }
    });
};

// Пример использования
$('.element').classes(function(className) {
    console.log(className); // Торжество для каждого класса! 🎉
});

Такой подход позволяет эффективнее работать с классами различных элементов и обрабатывать их в соответствии с конкретными критериями.

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

Можно представить HTML-элемент в виде вешалки (🧥🎩), а классы в роли шляп (🎓👒🧢):

HTML-элемент (🧥🎩): Вешалка гордится своими шляпами.

Применение `$(element).attr('class').split(' ')` в jQuery аналогично:

Обзору каждой метки для ознакомления со всеми имеющимися шляпами.

Список классов (🎓👒🧢): ['top-hat', 'sun-hat', 'cap'] // Мы готовы к модному шоу! 📸

Теперь мы точно знаем, какие шляпы в нашем распоряжении.

Списки классов: Решение проблем и возможные сложности

Определение классов и инициирование действий

Внутри циклов (for или $.each в jQuery) можно вызвать действия, связанные с определёнными классами:

$.each(classList, function(index, item) {
  if(item === 'important-class') {
    // Эксклюзивный код для важного класса
  }
});

При частых проверках классов определите функцию:

function performActionBasedOnClass(element, className) {
  if(element.classList.contains(className)) {
    // Выполните действие для специального класса
  }
}

performActionBasedOnClass(domElement, 'active'); // Класс 'active' находится в фокусе внимания!

Возможные проблемы и способы их решения

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

if (classes) {
  var sanitizedClasses = classes.replace(/[^a-zA-Z0-9\-_\s]+/g, '').split(/\s+/);
  // Теперь массив sanitizedClasses безупречен! ✨
}

Временные изменения в классах

Классы могут меняться во время взаимодействия пользователя или при выполнении скриптов. Чтобы отслеживать эти изменения, используйте .prop("classList"):

$(element).on('click', function() {
  console.log($(this).prop('classList')); // Классы обновляются при клике! 🖱️
});

Без jQuery: classList в JavaScript

Если вы работаете без использования jQuery, то вот как вы можете применить classList так, чтобы напрямую работать с JavaScript'ом:

const classes = document.querySelector('.element').classList;
console.log(...classes); // Каждый класс в центре внимания! 🕺

Это эффективное решение, которое будет полезно в проектах, где jQuery не является ключевым компонентом.