Hoe doe je jQuery’s hasClassmet gewoon JavaScript? Bijvoorbeeld,
<body class="foo thatClass bar">
Wat is de JavaScript-manier om te vragen of <body>thatClassheeft?
Antwoord 1, autoriteit 100%
U kunt controleren of element.classNameovereenkomt met /\bthatClass\b/.
\bkomt overeen met een woordafbreking.
Of u kunt de eigen implementatie van jQuery gebruiken:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
Om je meer algemene vraag te beantwoorden, kun je de broncodevan jQuery bekijken op github of bij de bron voor hasClassspecifiek in deze bronviewer.
Antwoord 2, autoriteit 97%
Gebruik gewoon classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
Andere toepassingen van classList:
document.body.classList.add('thisClass');
// $('body').addClass('thisClass');
document.body.classList.remove('thatClass');
// $('body').removeClass('thatClass');
document.body.classList.toggle('anotherClass');
// $('body').toggleClass('anotherClass');
Browserondersteuning:
- Chrome 8.0
- Firefox 3.6
- ie 10
- opera 11.50
- Safari 5.1
classListbrowser ondersteuning
Antwoord 3, Autoriteit 30%
De meest effectieve één voering die
- retourneert een Boolean (in tegenstelling tot het antwoord van de Okering)
- retourneert geen vals positief bij het zoeken naar
thisClassop een element datclass="thisClass-suffix"heeft. - is compatibel met elke browser tot ten minste IE6
function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
Antwoord 4, Autoriteit 26%
// 1. Use if for see that classes:
if (document.querySelector(".section-name").classList.contains("section-filter")) {
alert("Grid section");
// code...
}<!--2. Add a class in the .html:-->
<div class="section-name section-filter">...</div>Antwoord 5, Autoriteit 26%
Het attribuut dat de in gebruik van de lessen opslaat, is className.
zodat u kunt zeggen:
if (document.body.className.match(/\bmyclass\b/)) {
....
}
Als u een locatie wilt die u laat zien hoe jQuery alles doet, zou ik voorstellen:
http://code.jQuery.com/jQuery-1.5.js
Antwoord 6, autoriteit 11%
heeft de functie Class:
HTMLElement.prototype.hasClass = function(cls) {
var i;
var classes = this.className.split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] == cls) {
return true;
}
}
return false;
};
addClass-functie:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};
removeClass-functie:
HTMLElement.prototype.removeClass = function(remove) {
var newClassName = "";
var i;
var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
for(i = 0; i < classes.length; i++) {
if(classes[i] !== remove) {
newClassName += classes[i] + " ";
}
}
this.className = newClassName.trim();
};
Antwoord 7, autoriteit 9%
Ik gebruik een eenvoudige/minimale oplossing, één regel, cross-browser en werk ook met oudere browsers:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'
Deze methode is geweldig omdat er geen polyfillsnodig zijn en als je ze gebruikt voor classListveel beter qua prestaties. Voor mij tenminste.
Update: ik heb een kleine polyfill gemaakt, een allround oplossing die ik nu gebruik:
function hasClass(element,testClass){
if ('classList' in element) { return element.classList.contains(testClass);
} else { return new Regexp(testClass).exec(element.className); } // this is better
//} else { return el.className.indexOf(testClass) != -1; } // this is faster but requires indexOf() polyfill
return false;
}
Zie het volledige bestand hiervoor de andere klassenmanipulatie.
Antwoord 8, autoriteit 8%
een goede oplossing hiervoor is om te werken met classList en bevat.
ik deed het als volgt:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...
Dus je hebt je element nodig en controleer de lijst met klassen. Als een van de klassen dezelfde is als degene die u zoekt, wordt true geretourneerd, zo niet, dan wordt false geretourneerd!
Antwoord 9, autoriteit 5%
Gebruik zoiets als:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');
Antwoord 10, autoriteit 4%
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}
Antwoord 11, autoriteit 3%
Deze ‘hasClass’-functie werkt in IE8+, FireFox en Chrome:
hasClass = function(el, cls) {
var regexp = new RegExp('(\\s|^)' + cls + '(\\s|$)'),
target = (typeof el.className === 'undefined') ? window.event.srcElement : el;
return target.className.match(regexp);
}
[Bijgewerkt jan’2021] Een betere manier:
hasClass = (el, cls) => {
[...el.classList].includes(cls); //cls without dot
};
Antwoord 12, autoriteit 3%
Element.matches()
In plaats van $(element).hasClass('example')in jQuery, kunt u element.matches('.example')gebruiken in gewoon JavaScript:
if (element.matches('.example')) {
// Element has example class ...
}
Browsercompatibiliteit bekijken
Antwoord 13
Nou, alle bovenstaande antwoorden zijn redelijk goed, maar hier is een kleine eenvoudige functie die ik heb bedacht. Het werkt best goed.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}
Antwoord 14
Wat vind je van deze aanpak?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );
https://jsfiddle.net/5sv30bhe/
Antwoord 15
Dit is de eenvoudigste manier Alleen met javascript:
var allElements = document.querySelectorAll('*');
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].hasAttribute("class")) {
//console.log(allElements[i].className);
if (allElements[i].className.includes("_the _class ")) {
console.log("I see the class");
}
}
}