Question Obtenir la liste des classes pour l'élément avec jQuery


Existe-t-il un moyen dans jQuery de faire une boucle ou d'assigner à un tableau toutes les classes affectées à un élément?

ex.

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

Je chercherai une classe "spéciale" comme dans "dolor_spec" ci-dessus. Je sais que je pourrais utiliser hasClass () mais le nom de la classe n'est pas forcément connu à ce moment-là.


556
2017-08-04 12:41


origine


Réponses:


Vous pouvez utiliser document.getElementById('divId').className.split(/\s+/); pour vous obtenir un tableau de noms de classe.

Ensuite, vous pouvez itérer et trouver celui que vous voulez.

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

jQuery ne vous aide pas vraiment ici ...

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

638
2017-08-04 12:44



Pourquoi personne n'a simplement énuméré.

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

221
2018-04-15 02:28



Voici un plugin jQuery qui retournera un tableau de toutes les classes que les éléments correspondants ont

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

Utilisez-le comme

$('div').classes();

Dans votre cas, les retours

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

Vous pouvez également passer une fonction à la méthode à appeler sur chaque classe

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

Voici un jsFiddle que j'ai mis en place pour démontrer et tester http://jsfiddle.net/GD8Qn/8/

Javascript minifié

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



Sur les navigateurs compatibles, vous pouvez utiliser les éléments DOM classList propriété.

$(element)[0].classList

C'est un objet de type tableau listant toutes les classes que l'élément a.

Si vous devez prendre en charge les anciennes versions de navigateur qui ne prennent pas en charge classList propriété, la page MDN liée inclut également un shim pour elle - même si le shim ne fonctionne pas sur les versions d'Internet Explorer sous IE 8.


111
2018-03-28 09:39



Vous devriez essayer celui-ci:

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

Il retourne un tableau de toutes les classes actuelles de l'élément.


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



Mettre à jour:

Comme @Ryan Leonard l'a fait remarquer correctement, ma réponse ne fixe pas vraiment le point que je me suis fait ... Vous devez à la fois couper et supprimer les espaces doubles avec (par exemple) string.replace (/ + / g, "") .. Ou vous pouvez diviser le el.className, puis supprimer les valeurs vides avec (par exemple) arr.filter (Boolean).

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

ou plus moderne

const classes = element.classList;

Vieux: 

Avec toutes les réponses données, vous ne devriez jamais oublier l'utilisateur .trim () (ou $ .trim ())

Comme les classes sont ajoutées et supprimées, il peut arriver qu'il y ait plusieurs espaces entre les chaînes de classe. 'class1 class2 class3' ..

Cela deviendrait ['class1', 'class2', '', '', '', 'class3'] ..

Lorsque vous utilisez la garniture, tous plusieurs les espaces sont supprimés ..


5
2018-01-04 16:39



Cela pourrait vous aider aussi. J'ai utilisé cette fonction pour obtenir des classes d'élément 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();
    });
}

Dans votre cas, vous voulez que la classe doler_ipsum vous pouvez faire comme ça maintenant calsses[2];.


3
2018-02-23 20:49



Essaye ça. Cela vous obtiendra les noms de toutes les classes de tous les éléments du document.

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

});

Voici l'exemple de travail: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/


2
2018-01-04 07:11