Come si fa jQuery hasClasscon JavaScript semplice? Per esempio,
<body class="foo thatClass bar">Qual è il modo JavaScript per chiedere se <body>ha thatClass?
Risposte:
Puoi controllare se le element.classNamepartite /\bthatClass\b/.
\bcorrisponde a una pausa di parole.
In alternativa, è possibile utilizzare l'implementazione di jQuery:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) Per rispondere alla tua domanda più generale, puoi guardare il codice sorgente di jQuery su github o l'origine per questo hasClassspecifico visualizzatore di sorgenti .
rclassè in realtà;))
\bcorrisponderebbe a "thatClass-anotherClass"?
/[\t\r\n\f]/g. Inoltre è bene ricordare che /\bclass\b/per i nomi di classe con -segno meno (a parte quello che funziona bene) può fallire , ecco perché l'implementazione di jQuery è migliore e più affidabile. Ad esempio: /\bbig\b/.test('big-text')restituisce true anziché false previsto.
Usa semplicemente classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}Altri usi di 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');Supporto browser:
.classListcome stringa, ma non riconoscerà i metodi più moderni come.classList.contains()
Quello più efficace è quello
thisClassun elemento che ha class="thisClass-suffix".function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}L'attributo che memorizza le classi in uso è className.
Quindi puoi dire:
if (document.body.className.match(/\bmyclass\b/)) {
....
}Se vuoi una posizione che ti mostri come jQuery fa tutto, ti suggerirei:
matchattributo torna utile! JQuery fa davvero qualcosa di più di quanto sia possibile in JavaScript ?! Altrimenti, jQuery è solo un peso inutile di shorthands.
myclass-something, come \bcorrisponde al trattino.
// 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>Funzione hasClass:
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;
};funzione addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};funzione removeClass:
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();
};Uso una soluzione semplice / minima, una riga, cross-browser e funziona anche con i browser legacy:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Questo metodo è ottimo perché non richiede i polyfill e se li usi per classListessere molto meglio in termini di prestazioni. Almeno per me.
Aggiornamento: ho creato un piccolo polyfill che è una soluzione a tutto tondo che uso ora:
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;
}Per la manipolazione dell'altra classe, vedere qui il file completo .
notmyClassHere?
!/myClass/.test(document.body.className)notare il !simbolo.
thisIsmyClassHere.
una buona soluzione per questo è lavorare con classList e contiene.
l'ho fatto così:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Quindi hai bisogno del tuo elemento e controlla l'elenco delle classi. Se una delle classi è uguale a quella che cerchi, restituirà true, altrimenti restituirà false!
Usa qualcosa come:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? Non vuoi anche >=0alla fine?
[].indexOfse classListha un containsmetodo?
myHTMLSelector.classList.indexOf('the-class')restituisce l'errore myHTMLSelector.classList.indexOf is not a functionperché poiché myHTMLSelector.classListnon è un array. Ma immagino che quando lo si chiama usando Array.prototypeuna conversione avvenga. Questo può supportare un browser meno recente, sebbene containsabbia un ottimo supporto.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Questa funzione 'hasClass' funziona in IE8 +, FireFox e 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);
}Bene, tutte le risposte di cui sopra sono piuttosto buone, ma ecco una piccola funzione che ho montato. Funziona abbastanza bene.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListha un containsmetodo?
Cosa ne pensi di questo approccio?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
Ecco il modo più semplice:
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");
}
}
}
classproprietà (che in caso di più classi avrà più nomi di classe in ordine casuale separati da uno spazio) e verificare se il nome della tua classe è presente. Non tremendamente difficile, ma comunque terribilmente scomodo se non per scopi di apprendimento :)