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

Existe-t-il un moyen dans jQuery de parcourir 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 vais chercher une classe "spéciale" comme dans "dolor_spec" ci-dessus. Je sais que je pourrais utiliser hasClass () mais le nom de classe réel n'est pas nécessairement connu à l'époque.

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

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

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

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

EDIT: Comme le souligne @MarkAmery, vous ne pouvez pas simplement .split(' ')parce que les noms de classe peuvent être séparés par n'importe quel type d'espace.

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

$(element)[0].classList

Il s'agit d'un objet de type tableau répertoriant 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 classListpropriété, la page MDN liée comprend également un shim pour celui-ci - bien que même le shim ne fonctionne pas sur les versions d'Internet Explorer inférieures à IE 8.

Voici un plugin jQuery qui renverra un tableau de toutes les classes des éléments correspondants

;!(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 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 réduit

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

Vous devriez essayer celui-ci:

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

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

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

     //do something

});

Mise à jour:

Comme @Ryan Leonard l'a souligné correctement, ma réponse ne résout pas vraiment le point que j'ai fait moi-même ... Vous devez à la fois couper et supprimer les espaces doubles avec (par exemple) string.replace (/ + / g, "") .. Ou vous pouvez diviser 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 devez jamais oublier d'utiliser .trim () (ou $ .trim ())

Parce que les classes sont ajoutées et supprimées, il peut arriver qu'il y ait plusieurs espaces entre la chaîne de classe .. par exemple 'class1 class2 class3' ..

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

Lorsque vous utilisez le découpage, tous les espaces multiples sont supprimés.

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

Cela pourrait-il aussi vous aider? J'ai utilisé cette fonction pour obtenir des classes d'éléments 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 u puisse faire comme ça maintenant calsses[2];.

Merci pour cela - J'avais un problème similaire, car j'essaie 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 <a>balise active / désactive le texte d'aide en donnant la <a>balise [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 associé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");}
    }
    });
} 

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/

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

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

mais j'ai obtenu une belle "cette fonction n'est pas disponible pour cet élément".

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

$('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 (outre img).

J'espère que cela aide.

javascript fournit un attribut classList pour un élément de noeud 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

Un peu tard, mais l'utilisation de la fonction extend () vous permet d'appeler "hasClass ()" sur n'importe quel élément, par exemple:
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 question est de savoir ce que Jquery est conçu pour faire.

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

Et pourquoi personne n'a donné .find () comme réponse?

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

Il existe également classList pour les navigateurs non IE:

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

Voilà, juste ajusté la réponse de readsquare pour retourner un tableau de toutes les classes:

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

Passez un élément jQuery à la fonction, pour qu'un exemple d'appel soit:

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

Je sais que c'est une vieille question mais quand même.

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

var className=".dolor_spec" //dynamic

Si vous souhaitez manipuler l'élément

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

Si vous voulez vérifier si l'élément a une classe

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

si plusieurs classes

//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