Obtener lista de clases para el elemento con jQuery

¿Por qué nadie simplemente ha enumerado.

$(element).attr("class").split(' ');

Aquí hay un complemento de jQuery que devolverá una matriz de todas las clases que tienen los elementos coincidentes

;!(function ($) {
    $.fn.classes = function (callback) {
        var classes = [];
        $.each(this, function (i, v) {
            var splitClassName = v.className.split(/\s+/);
            for (var j = 0; j < splitClassName.length; j++) {
                var className = splitClassName[j];
                if (-1 === classes.indexOf(className)) {
                    classes.push(className);
                }
            }
        });
        if ('function' === typeof callback) {
            for (var i in classes) {
                callback(classes[i]);
            }
        }
        return classes;
    };
})(jQuery);

Úsalo como

$('div').classes();

En su caso devuelve

["Lorem", "ipsum", "dolor_spec", "sit", "amet"]

También puede pasar una función al método que se llamará en cada clase

$('div').classes(
    function(c) {
        // do something with each class
    }
);

Aquí hay un jsFiddle que configuré para demostrar y probar http://jsfiddle.net/GD8Qn/8 /

Javascript minificado

;!function(e){e.fn.classes=function(t){var n=[];e.each(this,function(e,t){var r=t.className.split(/\s+/);for(var i in r){var s=r[i];if(-1===n.indexOf(s)){n.push(s)}}});if("function"===typeof t){for(var r in n){t(n[r])}}return n}}(jQuery);

En navegadores compatibles, puede usar elementos DOM' classList propiedad.

$(element)[0].classList

Es un objeto similar a una matriz que lista todas las clases que tiene el elemento.

Si necesita admitir versiones antiguas del navegador que no admiten la propiedad classList, la página MDN vinculada también incluye una cuña para ella, aunque incluso la cuña no funcionará en las versiones de Internet Explorer inferiores a IE 8.

Deberías probar este:

$("selector").prop("classList")

Devuelve una matriz de todas las clases actuales del elemento.

var classList = $(element).attr('class').split(/\s+/);
$(classList).each(function(index){

     //do something

});

$('div').attr('class').split(' ').map(function(cls){ console.log(cls);})

Actualización:

Como @Ryan Leonard señaló correctamente, mi respuesta realmente no arregla el punto que hice yo mismo... Necesita recortar y eliminar espacios dobles con (por ejemplo) cadena.replace(/ +/g, " ").. O podrías dividir el el.className y luego eliminar los valores vacíos con (por ejemplo) arr.filtro(Boolean).

const classes = element.className.split(' ').filter(Boolean);

O más moderno

const classes = element.classList;

Antiguo:

Con todas las respuestas dadas, nunca debes olvidar al usuario .trim() (o $.trim ())

Debido a que las clases se agregan y eliminan, puede suceder que haya varios espacios entre la cadena de clase.. por ejemplo, "class1 class2 class3"..

Esto se convertiría en ['class1', 'class2',",",",'class3']..

Cuando se utiliza trim, todos múltiples los espacios se eliminan..

Puede que esto también te pueda ayudar. He utilizado esta función para obtener clases del elemento childern..

function getClickClicked(){
    var clickedElement=null;
    var classes = null;<--- this is array
    ELEMENT.on("click",function(e){//<-- where element can div,p span, or any id also a class
        clickedElement = $(e.target);
        classes = clickedElement.attr("class").split(" ");
        for(var i = 0; i<classes.length;i++){
            console.log(classes[i]);
        }
        e.preventDefault();
    });
}

En su caso desea que la clase u de doler_ipsum pueda hacer esto ahora calsses[2];.

Prueba Esto. Esto le dará los nombres de todas las clases de todos los elementos del documento.

$(document).ready(function() {
var currentHtml="";
$('*').each(function() {
    if ($(this).hasClass('') === false) {
        var class_name = $(this).attr('class');
        if (class_name.match(/\s/g)){
            var newClasses= class_name.split(' ');
            for (var i = 0; i <= newClasses.length - 1; i++) {
                if (currentHtml.indexOf(newClasses[i]) <0) {
                    currentHtml += "."+newClasses[i]+"<br>{<br><br>}<br>"
                }
            }
        }
        else
        {
            if (currentHtml.indexOf(class_name) <0) {
                currentHtml += "."+class_name+"<br>{<br><br>}<br>"
            }
        }
    }
    else
    {
        console.log("none");
    }
});
$("#Test").html(currentHtml);

});

Aquí está el ejemplo de trabajo: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

Gracias por esto - estaba teniendo un problema similar, ya que estoy tratando de relacionar programáticamente los objetos con nombres de clase jerárquicos, a pesar de que esos nombres no necesariamente sean conocidos por mi script.

En mi script, quiero una etiqueta <a> para activar/desactivar el texto de ayuda dando la etiqueta <a> [some_class] más la clase de toggle, y luego dándole su texto de ayuda la clase de [some_class]_toggle. Este código está encontrando con éxito los elementos relacionados usando jQuery:

$("a.toggle").toggle(function(){toggleHelp($(this), false);}, function(){toggleHelp($(this), true);});

function toggleHelp(obj, mode){
    var classList = obj.attr('class').split(/\s+/);
    $.each( classList, function(index, item){
    if (item.indexOf("_toggle") > 0) {
       var targetClass = "." + item.replace("_toggle", "");
       if(mode===false){$(targetClass).removeClass("off");}
       else{$(targetClass).addClass("off");}
    }
    });
} 

Javascript proporciona un atributo classList para un elemento node en dom. Simplemente usando

  element.classList

Devolverá un objeto de forma

  DOMTokenList {0: "class1", 1: "class2", 2: "class3", length: 3, item: function, contains: function, add: function, remove: function…}

El objeto tiene funciones como contains, add, remove que puede usar

Tuve un problema similar, para un elemento de tipo imagen. Necesitaba comprobar si el elemento era de cierta clase. Primero probé con:

$('<img>').hasClass("nameOfMyClass"); 

Pero tengo un bonito "esta función no está disponible para este elemento".

Luego inspeccioné mi elemento en el explorador DOM y vi un atributo muy bueno que podría usar: className. Contenía los nombres de todas las clases de mi elemento separados por espacios en blanco.

$('img').className // it contains "class1 class2 class3"

Una vez que obtengas esto, simplemente divide la cadena como habitual.

En mi caso esto funcionó:

var listOfClassesOfMyElement= $('img').className.split(" ");

Asumo que esto funcionaría con otros tipos de elementos (además de img).

Espero que ayude.

Un poco tarde, pero usando la función extend () le permite llamar a "hasClass ()" en cualquier elemento, p.ej.:
var hasClass = $('#divId').hasClass('someClass');

(function($) {
$.extend({
    hasClass: new function(className) {
        var classAttr = $J(this).attr('class');
        if (classAttr != null && classAttr != undefined) {
            var classList = classAttr.split(/\s+/);
            for(var ix = 0, len = classList.length;ix < len;ix++) {
                if (className === classList[ix]) {
                    return true;
                }
            }
        }
        return false;
    }
}); })(jQuery);

La pregunta es para qué está diseñado Jquery.

$('.dolor_spec').each(function(){ //do stuff

Y por qué nadie ha dado .find () como respuesta?

$('div').find('.dolor_spec').each(function(){
  ..
});

También hay classList para navegadores que no son IE:

if element.classList.contains("dolor_spec") {  //do stuff

Aquí tienes, acaba de ajustar la respuesta de readsquare para devolver una matriz de todas las clases:

function classList(elem){
   var classList = elem.attr('class').split(/\s+/);
    var classes = new Array(classList.length);
    $.each( classList, function(index, item){
        classes[index] = item;
    });

    return classes;
}

Pase un elemento jQuery a la función, de modo que una llamada de ejemplo sea:

var myClasses = classList($('#myElement'));

Sé que esta es una vieja pregunta, pero aún así.

<div id="specId" class="Lorem ipsum dolor_spec sit amet">Hello World!</div>

var className=".dolor_spec" //dynamic

Si desea manipular el elemento

$("#specId"+className).addClass('whatever');

Si desea comprobar si el elemento tiene clase

 $("#specId"+className).length>0

Si hay varias clases

//if you want to select ONE of the classes
var classNames = ['.dolor_spec','.test','.test2']
$("#specId"+classNames).addClass('whatever');
$("#specId"+classNames).length>0
//if you want to select all of the classes
var result = {className: ""};
classNames.forEach(function(el){this.className+=el;},result);
var searchedElement= $("#specId"+result.className);
searchedElement.addClass('whatever');
searchedElement.length>0