Obtenga la lista de clases para el elemento con jQuery

¿Hay alguna manera en jQuery para recorrer o asignar a una matriz todas las clases que están asignadas a un elemento?

ex.

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

Buscaré una clase "especial" como en "dolor_spec" arriba. Sé que podría usar hasClass () pero el nombre de la clase real no necesariamente se conoce en ese momento.

Puede usarlo document.getElementById('divId').className.split(/\s+/);para obtener una matriz de nombres de clase.

Luego puedes iterar y encontrar el que deseas.

var classList = document.getElementById('divId').className.split(/\s+/);
for (var i = 0; i < classList.length; i++) {
    if (classList[i] === 'someClass') {
        //do something
    }
}

jQuery realmente no te ayuda aquí ...

var classList = $('#divId').attr('class').split(/\s+/);
$.each(classList, function(index, item) {
    if (item === 'someClass') {
        //do something
    }
});

¿Por qué nadie tiene simplemente una lista?

$(element).attr("class").split(/\s+/);

EDITAR: Como señala @MarkAmery, no puede simplemente .split(' ')porque los nombres de clase pueden estar separados por cualquier tipo de espacio en blanco.

En los navegadores compatibles, puede usar la classListpropiedad de elementos DOM .

$(element)[0].classList

Es un objeto tipo matriz que enumera todas las clases que tiene el elemento.

Si necesita admitir versiones antiguas del navegador que no admitan la classListpropiedad, la página MDN vinculada también incluye una cuña, aunque incluso la cuña no funcionará en las versiones de Internet Explorer por debajo de IE 8.

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

;!(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);

Úselo como

$('div').classes();

En tu caso vuelve

["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);

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

});

Actualizar:

Como @Ryan Leonard señaló correctamente, mi respuesta realmente no soluciona el punto que hice yo mismo ... Necesita recortar y eliminar espacios dobles con (por ejemplo) string.replace (/ + / g, "") .. O puede dividir el.className y luego eliminar valores vacíos con (por ejemplo) arr.filter (booleano).

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

o más moderno

const classes = element.classList;

Antiguo:

Con todas las respuestas dadas, nunca debe olvidarse del usuario .trim () (o $ .trim ())

Debido a que las clases se agregan y eliminan, puede suceder que haya múltiples espacios entre la cadena de clase ... por ejemplo, 'clase1 clase2 clase3'

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

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

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

¿Podría esto también ayudarte? He usado 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 la clase doler_ipsum que puede hacer así ahora calsses[2];.

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

En mi secuencia de comandos, quiero una <a>etiqueta para activar / desactivar el texto de ayuda dando la <a>etiqueta [some_class]más la clase de toggle, y luego dando su clase de texto de ayuda [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");}
    }
    });
} 

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/

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

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

pero obtuve un buen "esta función no está disponible para este elemento".

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

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

Una vez que obtenga esto, simplemente divida la cadena como de costumbre.

En mi caso esto funcionó:

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

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

Espero eso ayude.

javascript proporciona un atributo classList para un elemento de nodo 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 contiene, agrega, elimina, que puedes usar

Un poco tarde, pero el uso de la función extend () le permite llamar a "hasClass ()" en cualquier elemento, por ejemplo:
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, solo modificó 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, para que una llamada de muestra 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 quieres manipular un elemento

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

Si quieres comprobar si el elemento tiene clase

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

si 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