Get class list for element with jQuery

Power moves: advanced class handling

Direct access with classList

To go beyond, tap into the classList property directly:

var domElement = $('.element')[0];
var classArray = Array.from(domElement.classList);  // Look, Ma! No jQuery! ✨


The classList gives access to its methods like .add(), .remove(), and .toggle(). To check for a class, use its .contains() method, an alternative for .hasClass():

if (domElement.classList.contains('someClass')) {
    // Found it! Like Where's Waldo but easier
}


Dynamic class checks

The .prop("classList") offers dynamic access to class information. It fetches properties directly from DOM elements:

var propClassList = $('.element').prop('classList');
if (propClassList.contains('someClass')) {
    // Class exists // Classy, isn't it? 👑
}


If you need to support legacy browsers, fetch classList polyfills on MDN or convert classList to array:

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

Special force: jQuery plugins

Create your custom jQuery plugin to get unique class names in array format. Like having a secret weapon on your jQuery belt:

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

// Usage
$('.element').classes(function(className) {
    console.log(className); // Party on each class! 🎉
});


This custom tool allows you to work with class names on various elements, ts facilitating tailor-made behaviors and processing.

Class lists: Problem solving and potential issues

Class detection and action triggering

Inside loop constructs like for or in jQuery's $.each, you can initiate class-specific actions:

$.each(classList, function(index, item) {
  if(item === 'important-class') {
    // Code for the posh and important class // VIPs only 👑
  }
});


For reusable class checks, design a function:

function performActionBasedOnClass(element, className) {
  if(element.classList.contains(className)) {
    // Action for the special class // Oh la la 🎩
  }
}

performActionBasedOnClass(domElement, 'active'); // 'active' joins the party!


Possible issues and fixes

No class, duplicate class names, unwanted spaces, or special characters in classes can disrupt your logic. Remember to validate and perform checks:

if (classes) {
  var sanitizedClasses = classes.replace(/[^a-zA-Z0-9\-_\s]+/g, '').split(/\s+/);
  // Now the sanitizedClasses array is all clean and shiny! ✨
}


Real-time class updates

Classes can change based on user interaction or script execution. To get the updated class list, .prop("classList") is your friend:

$(element).on('click', function() {
  console.log($(this).prop('classList')); // Classy updates on click! 🖱️
});


Going vanilla: classList in JavaScript

Apropos jQuery, here's a quick tip on classList using pure JavaScript:

const classes = document.querySelector('.element').classList;
console.log(...classes); // Every class has its day! 🕺


It's a native and efficient option, especially when jQuery isn't a project dependency.