web-dev-qa-db-fra.com

Obtenir la liste de classes pour l'élément avec jQuery

Existe-t-il un moyen dans jQuery de parcourir en boucle ou d’affecter à un tableau toutes les classes affectées à un élément?

ex.

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

Je vais chercher 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 peut-être pas nécessairement connu à ce moment-là.

javascriptjqueryhtml
621
Buggabill

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

Ensuite, vous pouvez parcourir 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
    }
});
691
redsquare

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

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

EDIT: Comme le souligne @MarkAmery, vous ne pouvez pas simplement .split(' '), car les noms de classe peuvent être séparés par tout type d’espace.

261
Dreamr OKelly

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, retourne

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

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

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

Voici un jsFiddle que j'ai configuré 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);
138
Will

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

$(element)[0].classList

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

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

131
Pehmolelu

Vous devriez essayer celui-ci:

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

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

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

     //do something

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

Mise à jour:

Comme @Ryan Leonard l'a bien souligné, ma réponse ne résout pas vraiment le problème que je me suis posé moi-même ... Vous devez ajuster et supprimer les doubles espaces avec (par exemple) string.replace (/ +/g, "") .. Ou vous pouvez scinder le nom 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;

Old:

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

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

Cela se transformerait en ['class1', 'class2', '', '', '', 'class3'] ..

Lorsque vous utilisez trim, tous les multiples espaces sont supprimés.

6
DutchKevv

Cela pourrait-il 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 puisse être faite comme ceci maintenant calsses[2];.

3
Phoenix

Merci pour cela - je rencontrais un problème similaire, car je tente de relier par programme les objets aux noms de classe hiérarchiques, même si ces noms ne sont pas nécessairement connus de mon script.

Dans mon script, je veux qu'une balise <a> active/désactive le texte d'aide en donnant la balise <a>[some_class] plus la classe de toggle, puis en donnant son texte d'aide. la classe de [some_class]_toggle. Ce code trouve avec succès les éléments liés à l'aide de 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");}
    }
    });
}
2
Alan L.

Essaye ça. Cela vous donnera 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
Sumit Raju

javascript fournit un attribut classList pour un élément node dans dom. Simplement en utilisant

  element.classList

retournera un objet de forme

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

L'objet a des fonctions comme contient, ajouter, supprimer que vous pouvez utiliser

0
Anuj J

J'ai eu un problème similaire, pour un élément de type image. Je devais vérifier si l'élément appartenait à une certaine classe. J'ai d'abord essayé avec:

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

mais j'ai eu un Nice "cette fonction n'est pas disponible pour cet élément".

Ensuite, j'ai inspecté mon élément dans l'explorateur DOM et j'ai vu un attribut très gentil que je pouvais utiliser: className. Il contenait les noms de toutes les classes de mon élément séparées par des espaces.

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

Une fois que vous obtenez cela, divisez simplement la chaîne comme d’habitude.

Dans mon cas, cela a fonctionné:

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

Je suppose que cela fonctionnerait avec d’autres types d’éléments (en plus de img).

J'espère que ça aide.

0
eva