Comment faites-vous des jQuery hasClassavec du JavaScript ordinaire? Par exemple,
<body class="foo thatClass bar">Quelle est la façon JavaScript de demander si <body>oui thatClass?
Réponses:
Vous pouvez vérifier si des element.classNamecorrespondances /\bthatClass\b/.
\bcorrespond à une coupure de mot.
Ou, vous pouvez utiliser la propre implémentation de jQuery:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) Pour répondre à votre question plus générale, vous pouvez consulter le code source de jQuery sur github ou la source hasClassspécifiquement dans ce visualiseur de source .
rclassqui est réellement;))
\bcorrespondrait pas à "thatClass-anotherClass"?
/[\t\r\n\f]/g. Il est également bon de mentionner que cela /\bclass\b/peut échouer pour les noms de classe avec le -signe moins (à part que cela fonctionne bien), c'est pourquoi l'implémentation de jQuery est meilleure et plus fiable. Par exemple: /\bbig\b/.test('big-text')retourne vrai au lieu de faux attendu.
Utilisez simplement classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}Autres utilisations de 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');Prise en charge du navigateur:
.classListsous forme de chaîne, mais il ne reconnaîtra pas les méthodes les plus modernes telles que.classList.contains()
La doublure la plus efficace
thisClasssur un élément qui aclass="thisClass-suffix" .function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}L'attribut qui stocke les classes en cours d'utilisation est className .
Vous pouvez donc dire:
if (document.body.className.match(/\bmyclass\b/)) {
....
}Si vous voulez un emplacement qui vous montre comment jQuery fait tout, je suggère:
matchattribut est à nouveau utile! Est-ce que jQuery fait vraiment plus que ce qui est possible en JavaScript?! Sinon, jQuery n'est qu'un poids inutile de raccourcis.
myclass-something, comme \bcorrespond au trait d'union.
// 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>Fonction 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;
};Fonction addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};Fonction 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();
};J'utilise une solution simple / minimale, une ligne, un navigateur croisé et fonctionne également avec les navigateurs hérités:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Cette méthode est excellente car elle ne nécessite pas de polyfills et si vous les utilisez pourclassList c'est beaucoup mieux en termes de performances. Au moins pour moi.
Mise à jour: j'ai fait un minuscule polyfill qui est une solution polyvalente que j'utilise maintenant:
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;
}Pour l'autre manipulation de classe, voir le fichier complet ici .
notmyClassHere?
!/myClass/.test(document.body.className)Notez également le !symbole.
thisIsmyClassHere.
une bonne solution pour cela est de travailler avec classList et contains.
je l'ai fait comme ça:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Vous avez donc besoin de votre élément et vérifiez la liste des classes. Si l'une des classes est la même que celle que vous recherchez, elle retournera true sinon elle retournera false!
Utilisez quelque chose comme:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? Tu ne veux pas aussi >=0à la fin?
[].indexOfif classLista une containsméthode?
myHTMLSelector.classList.indexOf('the-class')renvoie l'erreur qui, myHTMLSelector.classList.indexOf is not a functioncar myHTMLSelector.classListn'est pas un tableau. Mais je suppose que lors de l'appel en utilisant Array.prototypeune conversion, cela se produit. Cela peut prendre en charge un navigateur plus ancien, mais containsa un très bon support.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Cette fonction 'hasClass' fonctionne dans IE8 +, FireFox et 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);
}Eh bien, toutes les réponses ci-dessus sont plutôt bonnes, mais voici une petite fonction simple que j'ai préparée. Cela fonctionne plutôt bien.
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classLista une containsméthode?
Que pensez-vous de cette approche?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
Voici le moyen le plus simple:
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");
}
}
}
classpropriété (qui, dans le cas de plusieurs classes, aura plusieurs noms de classe dans un ordre aléatoire séparés par un espace) et vérifier si votre nom de classe s'y trouve. Pas terriblement difficile, mais toujours terriblement gênant si ce n'est à des fins d'apprentissage :)