Pregunta Obtener la lista de clases para el elemento con jQuery


¿Hay alguna manera en jQuery de 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>

Estaré buscando una clase "especial" como en "dolor_spec" arriba. Sé que podría usar hasClass () pero el nombre de la clase real puede no ser conocido en ese momento.


556
2017-08-04 12:41


origen


Respuestas:


Puedes usar document.getElementById('divId').className.split(/\s+/); para obtener una variedad de nombres de clase.

Luego puede iterar y encontrar el que desea.

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
    }
});

638
2017-08-04 12:44



¿Por qué nadie ha enumerado simplemente?

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

221
2018-04-15 02:28



Aquí hay un plugin 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 regresa

["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 reducido

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

133
2018-06-27 18:17



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

$(element)[0].classList

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

Si necesita admitir versiones anteriores del navegador que no son compatibles con classList propiedad, la página MDN vinculada también incluye una corrección para ello, aunque incluso la corrección no funcionará en las versiones de Internet Explorer debajo de IE 8.


111
2018-03-28 09:39



Deberías probar este:

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

Devuelve una matriz de todas las clases actuales del elemento.


49
2018-04-28 12:12



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

     //do something

});

14
2018-05-08 21:47



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

7
2017-09-16 14:49



Actualizar:

Como @Ryan Leonard señaló correctamente, mi respuesta realmente no soluciona el problema que me planteé ... Necesita recortar y eliminar espacios dobles con (por ejemplo) string.replace (/ + / g, "") .. O podría dividir el el.className y luego eliminar los valores vacíos con (por ejemplo) arr.filter (Boolean).

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

o más moderno

const classes = element.classList;

Antiguo: 

Con todas las respuestas dadas, nunca se debe olvidar de usar .trim () (o $ .trim ())

Debido a que las clases se agregan y eliminan, puede suceder que haya varios espacios entre las cadenas de clase ... p. 'class1 class2 class3' ...

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

Cuando utilizas recortar, todo múltiple los espacios se eliminan ..


5
2018-01-04 16:39



Puede que esto también te pueda ayudar. He usado esta función para obtener clases de 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 tu caso, quieres la clase doler_ipsum, puedes hacer esto ahora calsses[2];.


3
2018-02-23 20:49