Controleren of een element een klasse in JavaScript bevat?

Element.prototype.hasClass = Element.prototype.hasClass || 
  function(classArr){
    var hasClass = 0,
        className = this.getAttribute('class');
    if( this == null || !classArr || !className ) return false;
    if( !(classArr instanceof Array) )
      classArr = classArr.split(' ');
    for( var i in classArr )
      // this.classList.contains(classArr[i]) // for modern browsers
      if( className.split(classArr[i]).length > 1 )  
          hasClass++;
    return hasClass == classArr.length;
};
///////////////////////////////
// TESTS (see browser's console when inspecting the output)
var elm1 = document.querySelector('p');
var elm2 = document.querySelector('b');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector('text'); // SVG text
console.log( elm1, ' has class "a": ', elm1.hasClass('a') );
console.log( elm1, ' has class "b": ', elm1.hasClass('b') );
console.log( elm1, ' has class "c": ', elm1.hasClass('c') );
console.log( elm1, ' has class "d": ', elm1.hasClass('d') );
console.log( elm1, ' has class "a c": ', elm1.hasClass('a c') );
console.log( elm1, ' has class "a d": ', elm1.hasClass('a d') );
console.log( elm1, ' has class "": ', elm1.hasClass('') );
console.log( elm2, ' has class "a": ', elm2.hasClass('a') );
// console.log( elm3, ' has class "a": ', elm3.hasClass('a') );
console.log( elm4, ' has class "a": ', elm4.hasClass('a') );

<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
    <text x="10" y="20" class='a'>SVG Text Example</text>
</svg>

Antwoord 12

Hier is een hoofdletterongevoelige triviale oplossing:

function hasClass(element, classNameToTestFor) {
    var classNames = element.className.split(' ');
    for (var i = 0; i < classNames.length; i++) {
        if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
            return true;
        }
    }
    return false;
}

Antwoord 13

1. Felix’ truc om spaties toe te voegen om de className en de string die je zoekt te flankeren, is de juiste manier om te bepalen of de elementen de class hebben of niet.

2. Als je een ander gedrag wilt hebben volgens de klasse, kun je functieverwijzingen of functies gebruiken binnen een kaart:

   function fn1(element){ /* code for element with class1 */ }
   function fn2(element){ /* code for element with class2 */ }
   function fn2(element){ /* code for element with class3 */ }
   var fns={'class1': fn1, 'class2': fn2, 'class3': fn3};
   for(var i in fns) {
       if(hasClass(test, i)) {
           fns[i](test);
       }
   }
   

   • for(var i in fns) doorloopt de toetsen in de fns-map.
   • Als er geen pauze is na fnsi, kan de code worden uitgevoerd wanneer er een overeenkomst is – zodat als het element bijvoorbeeld class1 en class2 heeft, zowel fn1 als fn2 worden uitgevoerd.
   • Het voordeel van deze benadering is dat de code die voor elke klasse moet worden uitgevoerd willekeurig is, zoals die in de switch-instructie; in uw voorbeeld voerden alle gevallen een vergelijkbare bewerking uit, maar morgen moet u mogelijk voor elk andere dingen doen.
   • U kunt het standaardgeval simuleren door een statusvariabele te hebben die aangeeft of er een overeenkomst in de lus is gevonden of niet.

Antwoord 14

Als het element maar één klassenaam heeft, kun je dit snel controleren door het class-attribuut op te halen. De andere antwoorden zijn veel robuuster, maar dit heeft zeker zijn toepassingen.

if ( element.getAttribute('class') === 'classname' ) {
}

Antwoord 15

Dit wordt ondersteund op IE8+.

Eerst controleren we of classListbestaat. Als dat zo is, kunnen we de containsmethode gebruiken die wordt ondersteund door IE10+. Als we IE9 of 8 gebruiken, valt het terug op het gebruik van een regex, wat niet zo efficiënt is, maar een beknopte polyfill is.

if (el.classList) {
  el.classList.contains(className);
} else {
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

Als je compileert met babel, kun je ook gewoon het volgende gebruiken:
el.classList.contains(className);

Antwoord 16

Om te controleren of een element een klasse bevat, gebruik je de methode else() van de eigenschap classList van het element:*

element.classList.contains(className);

*Stel dat je het volgende element hebt:

<div class="secondary info">Item</div>*

Om te controleren of het element de secundaire klasse bevat, gebruik je de volgende code:

const div = document.querySelector('div');
 div.classList.contains('secondary'); // true

Het volgende retourneert false omdat het element de klassefout niet heeft:

const div = document.querySelector('div');
 div.classList.contains('error'); // false

Antwoord 17

Ik denk dat dit de perfecte oplossing zal zijn

if ($(this).hasClass("your_Class")) 
    alert("positive");            
else              
    alert("Negative");

Antwoord 18

Ik zou Poly de classList-functionaliteit vullen en de nieuwe syntaxis gebruiken. Op deze manier zullen nieuwere browsers de nieuwe implementatie gebruiken (die veel sneller is) en alleen oude browsers zullen de prestatiehit van de code overnemen.

https://github.com/remy/polyfills/blob/master/ classList.js

Antwoord 19

Dit is een beetje vreemd, maar als je een evenement hebt dat een switch activeert, kun je het zonder lessen doen:

<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>

U kunt doen

$('body').click( function() {
    switch ( this.id.replace(/[0-9]/g, '') ) {
        case 'classOne': this.innerHTML = "I have classOne"; break;
        case 'classTwo': this.innerHTML = "I have classTwo"; break;
        default: this.innerHTML = "";
    }
});

.replace(/[0-9]/g, '')verwijdert cijfers uit id.

Het is een beetje hacky, maar werkt voor lange schakelaars zonder extra functies of lussen

Antwoord 20

Bekijk deze Codepen-link voor een snellere en gemakkelijke manier om een element te controleren of het een specifieke klasse heeft met vanilla JavaScript~!

hasClass (Vanilla JS)

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

Antwoord 21

Het gebruik van de classList is ook ideaal

HTML

<div id="box" class="myClass"></div>

JavaScript

const element = document.querySelector("#box");
element.classList.contains("myClass");

Antwoord 22

Zoals het geaccepteerde antwoord suggereert, retourneert Element.classNameeen tekenreeks, zodat u eenvoudig kunt controleren of een klasse bestaat met behulp van de indexOf()-methode:

element.className.indexOf('animated') > -1

Als u geïnteresseerd bent in het prestatieverschil tussen indexOfvs classList.contains, met indexOflijkt iets sneller te zijn. Ik heb een snelle benchmarkprestatietest gedaan om dat te controleren. Hier zijn mijn bevindingen: classname.indexof vs classlist.contains .

23

Deze vraag is vrij stevig beantwoord door element.classList.contains(), maar mensen kregen behoorlijk extravagant met hun antwoorden en maakten enkele vette claims, dus ik had een benchmark .

Vergeet niet dat elke test 1000 iteraties doet, dus de meeste hiervan zijn nog steeds erg snel. Tenzij u hiervoor uitgebreid bent voor een specifieke werking, ziet u geen prestatieverschil.

Ik raakte wat tests met eigenlijk elke manier om dit te doen. Op mijn machine, (Win 10, 24 GB, I7-8700), klasist.Containes uitgevoerd Super Goed. Dus deed ClassName.Split (”) die effectief hetzelfde is.

De winnaar is echter classList.contains(). Als u niet controleert op classist om undefined, ~(' ' + v.className + ' ').indexOf(' c' + i + ' ')te beperken kruipt vooruit 5-15%

24

Probeer deze:

document.getElementsByClassName = function(cl) {
   var retnode = [];
   var myclass = new RegExp('\\b'+cl+'\\b');
   var elem = this.getElementsByTagName('*');
   for (var i = 0; i < elem.length; i++) {
       var classes = elem[i].className;
       if (myclass.test(classes)) retnode.push(elem[i]);
   }
    return retnode;
};

Antwoord 25

in welk element bevindt zich momenteel de klasse ‘.bar’ ? Hier is een andere oplossing, maar dat is aan jou.

var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string
if (query.match(reg)) { // checks if it matches
  alert('the class .bar is attached to the following Element:\n' + query);
}

jsfiddle-demo

Natuurlijk is dit slechts een zoekactie voor 1 eenvoudig element <img>(/Image/g) maar je kunt alles in een array plaatsen zoals <li>is /LI/g, <ul>= /UL/genz.

Antwoord 26

Om toe te voegen aan het antwoord voor mensen die klassennamen proberen te vinden binnen inline SVG-elementen.

Verander de functie hasCLass()in:

function hasClass(element, cls) {
    return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + cls + ' ') > -1;
  }

In plaats van de eigenschap classNamete gebruiken, moet je de methode getAttribute()gebruiken om de klassenaam te pakken.

Antwoord 27

Ik heb deze functies voor mijn website gemaakt, ik gebruik alleen vanilla javascript, misschien helpt het iemand.
Eerst heb ik een functie gemaakt om elk HTML-element te krijgen:

//return an HTML element by ID, class or tag name
    var getElement = function(selector) {
        var elements = [];
        if(selector[0] == '#') {
            elements.push(document.getElementById(selector.substring(1, selector.length)));
        } else if(selector[0] == '.') {
            elements = document.getElementsByClassName(selector.substring(1, selector.length));
        } else {
            elements = document.getElementsByTagName(selector);
        }
        return elements;
    }

Dan de functie die de klasse ontvangt om te verwijderen en de selector van het element:

var hasClass = function(selector, _class) {
        var elements = getElement(selector);
        var contains = false;
        for (let index = 0; index < elements.length; index++) {
            const curElement = elements[index];
            if(curElement.classList.contains(_class)) {
                contains = true;
                break;
            }
        }
        return contains;
    }

Nu kunt u het als volgt gebruiken:

hasClass('body', 'gray')
hasClass('#like', 'green')
hasClass('.button', 'active')

Ik hoop dat het zal helpen.

28

Sinds .classNameis een tekenreeks, u kunt de tekenreeks gebruiken includes()-methode om te controleren of uw .classNameInclusief uw klasnaam:

element.className.includes("class1")

29

Voor mij de meest elegante en snellere manier om het te bereiken is:

function hasClass(el, cl) {
        return el.classList ? el.classList.contains(cl) : !!el.className && !!el.className.match(new RegExp('(?: |^)' + cl + '(?: |$)'));
    }