Krijg klasse lijst voor element met jQuery

Is er een manier in jQuery om door te lopen of toe te wijzen aan een array die alle klassen die aan een element zijn toegewezen?

ex.

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

Ik zal op zoek zijn naar een “speciale” klasse als in “Dolor_Spec” hierboven. Ik weet dat ik HASCLASS () zou kunnen gebruiken, maar de eigenlijke klassaam kan op dat moment niet noodzakelijk bekend zijn.

1, Autoriteit 100%

U kunt document.getElementById('divId').className.split(/\s+/);om u een reeks klassennamen te krijgen.

Dan kunt u herhalen en vinden die u wilt.

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

JQuery helpt u hier niet echt …

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

2, Autoriteit 41%

Waarom heeft niemand eenvoudig vermeld.

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

EDIT: Splitsen op /\s+/in plaats van ' 'om @ Markamerie bezwaar. (Bedankt @ Yashaolatoto .)

3, Autoriteit 21%

Bij het ondersteunen van browsers kunt u de classListeigenschap.

$(element)[0].classList

Het is een array-achtig object dat alle klassen van het element weergeeft.

Als u oude browserversies moet ondersteunen die de eigenschap classListniet ondersteunen, bevat de gekoppelde MDN-pagina er ook een shim voor – hoewel zelfs de shim niet werkt op Internet Explorer-versies onder IE 8.

Antwoord 4, autoriteit 19%

Hier is een jQuery-plug-in die een array retourneert van alle klassen die de overeenkomende elementen hebben

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

Gebruik het als

$('div').classes();

In jouw geval retour

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

Je kunt ook een functie doorgeven aan de methode die op elke klasse moet worden aangeroepen

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

Hier is een jsFiddle die ik heb ingesteld om http://jsfiddle.net/GD8Qn/8/ te demonstreren en te testen

Verkleind Javascript

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

Antwoord 5, autoriteit 11%

Je zou deze eens moeten proberen:

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

Het retourneert een lijst van alle huidige klassen van het element.

Antwoord 6, autoriteit 2%

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

Antwoord 7

Bijwerken:

Zoals @Ryan Leonard correct opmerkte, lost mijn antwoord niet echt het punt op dat ik zelf heb gemaakt… Je moet zowel dubbele spaties inkorten als verwijderen met (bijvoorbeeld) string.replace(/ +/g, ” “).. Of u kunt de el.className splitsen en vervolgens lege waarden verwijderen met (bijvoorbeeld) arr.filter(Boolean).

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

of moderner

const classes = element.classList;

Oud:

Met alle gegeven antwoorden, moet u nooit vergeten om te gebruiken .Rim () (of $ .trim ())

Omdat klassen worden toegevoegd en verwijderd, kan het gebeuren dat er meerdere ruimtes zijn tussen klassenkoord .. b.v. ‘Class1 Class2 & Nbsp; & nbsp; & nbsp; klasse3 ‘..

Dit zou in [‘Class1’, ‘Class2’ ” ” ”, ”, ‘,’ Class3 ‘] veranderen ..

Wanneer u Trim gebruikt, worden alle meerdere spaties verwijderen.

8

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

9

Bedankt hiervoor – ik had een soortgelijk probleem, omdat ik probeer de objecten te programmeren, zijn hiërarchische klasnamen, hoewel die namen misschien niet noodzakelijkerwijs aan mijn script bekend zijn.

In mijn script wil ik een <a>TAG om Help-tekst aan / uit te draaien door de <a>TAG <[some_class]PLUS DE KLASSE VAN toggle, en vervolgens de Help-tekst geven de klasse van [some_class]_toggle. Deze code vindt succesvol de gerelateerde elementen met 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");}
    }
    });
} 

10

Probeer dit. Dit krijgt u de namen van alle klassen uit alle elementen van het 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);

});

Hier is het werkvoorbeeld: https://jsfiddle.net/raju_sumit/2xu1ujoy/3/

11

Ik had een soortgelijke kwestie, voor een element van het type afbeelding. Ik moest controleren of het element van een bepaalde klasse was. Eerst heb ik geprobeerd met:

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

Maar ik heb een leuke “deze functie is niet beschikbaar voor dit element”.

Toen inspecteerde ik mijn element op de DOM Explorer en ik zag een heel leuk kenmerk dat ik kon gebruiken: ClassName. Het bevatte de namen van alle klassen van mijn element gescheiden door lege ruimtes.

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

Zodra u dit krijgt, split u gewoon de tekenreeks zoals gewoonlijk.

In mijn geval werkte dit:

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

Ik neem aan dat dit zou werken met andere soorten elementen (naast IMG).

Ik hoop dat het helpt.

12

U kunt zoiets volgen.

$('#elementID').prop('classList').add('yourClassName')
$('#elementID').prop('classList').remove('yourClassName')

13

JavaScript biedt een classistattribuut voor een knooppuntelement in DOM. Gewoon gebruikt

 element.classList

retourneert een object van formulier

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

Het object heeft functies zoals Bevat, Toevoegen, verwijderen welke u

kunt gebruiken

14

Een beetje laat, maar met de functie extend() kun je “hasClass()” aanroepen op elk element, bijvoorbeeld:

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

Antwoord 15

De vraag is waar JQuery voor is ontworpen.

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

En waarom heeft niemand .find()als antwoord gegeven?

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

Er is ook classList voor niet-IE-browsers:

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