Wie macht man jQuery's hasClassmit einfachem altem JavaScript? Beispielsweise,
<body class="foo thatClass bar">Wie kann man mit JavaScript fragen, ob dies der Fall <body>ist thatClass?
Wie macht man jQuery's hasClassmit einfachem altem JavaScript? Beispielsweise,
<body class="foo thatClass bar">Wie kann man mit JavaScript fragen, ob dies der Fall <body>ist thatClass?
Antworten:
Sie können überprüfen, ob element.classNameÜbereinstimmungen vorliegen /\bthatClass\b/.
\bentspricht einem Wortumbruch.
Oder Sie können die eigene Implementierung von jQuery verwenden:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 )
Um Ihre allgemeinere Frage zu beantworten, können Sie sich den Quellcode von jQuery auf github oder die Quelle hasClassspeziell in diesem Quell-Viewer ansehen .
rclasseigentlich;))
\bmit "thatClass-anotherClass" übereinstimmen?
/[\t\r\n\f]/g. Es ist auch gut zu erwähnen, dass /\bclass\b/Klassennamen mit -Minuszeichen fehlschlagen können (ansonsten funktioniert es gut). Deshalb ist die Implementierung von jQuery besser und zuverlässiger. Beispiel: /\bbig\b/.test('big-text')Gibt true anstelle von erwartet false zurück.
Verwenden Sie einfach classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}
Andere Verwendungen von 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');
Browser-Unterstützung:
.classListals Zeichenfolge abgerufen werden, erkennt jedoch die moderneren Methoden wie.classList.contains()
Der effektivste Einzeiler, der
thisClasseinem Element gesucht wird , das hat class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
Das Attribut, in dem die verwendeten Klassen gespeichert werden, lautet className.
Sie können also sagen:
if (document.body.className.match(/\bmyclass\b/)) {
....
}
Wenn Sie einen Ort suchen, der Ihnen zeigt, wie jQuery alles macht, würde ich vorschlagen:
matchAttribut ist wieder praktisch! Macht jQuery wirklich etwas mehr als in JavaScript möglich?! Wenn nicht, ist jQuery nur ein unnötiges Gewicht von Kurzschriften.
myclass-something, ebenso wie der \bBindestrich.
// 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>hasClass-Funktion:
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-Funktion:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};
removeClass-Funktion:
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();
};
Ich verwende eine einfache / minimale Lösung, eine Zeile, einen Cross-Browser und arbeite auch mit älteren Browsern:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Diese Methode ist großartig, da keine Polyfills erforderlich sind und wenn Sie sie verwenden, ist sie classListin Bezug auf die Leistung viel besser. Zumindest für mich.
Update: Ich habe eine winzige Polyfüllung erstellt, die eine Allround-Lösung ist, die ich jetzt verwende:
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;
}Informationen zur anderen Klassenmanipulation finden Sie in der vollständigen Datei hier .
notmyClassHere?
!/myClass/.test(document.body.className)Beachten Sie auch das !Symbol.
thisIsmyClassHere.
Eine gute Lösung hierfür ist die Arbeit mit classList und enthält.
Ich habe es so gemacht:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Sie benötigen also Ihr Element und überprüfen die Liste der Klassen. Wenn eine der Klassen mit der von Ihnen gesuchten identisch ist, wird true zurückgegeben, wenn nicht, wird false zurückgegeben!
Verwenden Sie etwas wie:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? Willst du nicht auch >=0am Ende?
[].indexOfwenn classListes eine containsMethode gibt?
myHTMLSelector.classList.indexOf('the-class')Gibt den Fehler zurück, dass myHTMLSelector.classList.indexOf is not a functionda myHTMLSelector.classListkein Array ist. Aber ich denke, wenn man es mit Array.prototypeeiner Konvertierung aufruft, passiert es. Dies unterstützt möglicherweise ältere Browser, containshat jedoch eine sehr gute Unterstützung.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Diese 'hasClass'-Funktion funktioniert in IE8 +, FireFox und 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);
}Nun, alle oben genannten Antworten sind ziemlich gut, aber hier ist eine kleine einfache Funktion, die ich entwickelt habe. Es funktioniert ziemlich gut.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListes eine containsMethode gibt?
Was denkst du über diesen Ansatz?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
Hier ist der einfachste Weg:
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");
}
}
}
classEigenschaft analysieren (bei mehreren Klassen werden mehrere Klassennamen in zufälliger Reihenfolge durch ein Leerzeichen getrennt) und prüfen, ob Ihr Klassenname darin enthalten ist. Nicht furchtbar schwierig, aber immer noch furchtbar unpraktisch, wenn nicht zu Lernzwecken :)