¿Cómo haces jQuery's hasClasscon JavaScript simple? Por ejemplo,
<body class="foo thatClass bar">¿Cuál es la forma de preguntar JavaScript si <body>tiene thatClass?
Respuestas:
Puede verificar si element.classNamecoincide /\bthatClass\b/.
\bcoincide con un salto de palabra.
O puede usar la propia implementación de jQuery:
var className = " " + selector + " ";
if ( (" " + element.className + " ").replace(/[\n\t]/g, " ").indexOf(" thatClass ") > -1 ) Para responder a su pregunta más general, puede mirar el código fuente de jQuery en github o en la fuente hasClassespecíficamente en este visor de fuentes .
rclassrealmente es))
\bcoincidiría con "thatClass-anotherClass"?
/[\t\r\n\f]/g. También es bueno mencionar que /\bclass\b/puede fallar para los nombres de clase con -signo menos (aparte de eso funciona bien), es por eso que la implementación de jQuery es mejor y más confiable. Por ejemplo: /\bbig\b/.test('big-text')devuelve verdadero en lugar de esperado falso.
Simplemente use classList.contains():
if (document.body.classList.contains('thatClass')) {
// do some stuff
}Otros usos 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');Soporte de navegador:
.classListcomo una cadena, pero no reconocerá los métodos más modernos como.classList.contains()
El revestimiento más efectivo que
thisClassun elemento que tieneclass="thisClass-suffix" .function hasClass( target, className ) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}El atributo que almacena las clases en uso es className .
Entonces puedes decir:
if (document.body.className.match(/\bmyclass\b/)) {
....
}Si desea una ubicación que le muestre cómo jQuery hace todo, le sugiero:
matchatributo vuelve a ser útil! ¿Realmente jQuery hace algo más de lo que es posible en JavaScript? Si no, jQuery es solo un peso innecesario de shorthands.
myclass-something, como \bcoincide con el guión.
// 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>función 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;
};Función addClass:
HTMLElement.prototype.addClass = function(add) {
if (!this.hasClass(add)){
this.className = (this.className + " " + add).trim();
}
};Función 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();
};Utilizo una solución simple / mínima, una línea, navegador cruzado, y también funciona con navegadores heredados:
/\bmyClass/.test(document.body.className) // notice the \b command for whole word 'myClass'Este método es excelente porque no requiere polyfills y si los usa paraclassList ello es mucho mejor en términos de rendimiento. Al menos para mi.
Actualización: hice un pequeño polyfill que es una solución completa que uso ahora:
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;
}Para la manipulación de otra clase, vea el archivo completo aquí .
notmyClassHere?
!/myClass/.test(document.body.className)notar el !símbolo.
thisIsmyClassHere.
Una buena solución para esto es trabajar con classList y contiene.
Lo hice así:
... for ( var i = 0; i < container.length; i++ ) {
if ( container[i].classList.contains('half_width') ) { ...Entonces necesita su elemento y verifique la lista de las clases. ¡Si una de las clases es la misma que la que busca, devolverá verdadero si no, devolverá falso!
Use algo como:
Array.prototype.indexOf.call(myHTMLSelector.classList, 'the-class');myHTMLSelector.classList.indexOf('the-class')? ¿No quieres también >=0al final?
[].indexOfsi classListtiene un containsmétodo?
myHTMLSelector.classList.indexOf('the-class')devuelve el error que myHTMLSelector.classList.indexOf is not a functionporque myHTMLSelector.classListno es una matriz. Pero supongo que cuando se llama usando Array.prototypealguna conversión sucede. Esto puede ser compatible con navegadores antiguos, aunque containstiene muy buen soporte.
if (document.body.className.split(/\s+/).indexOf("thatClass") !== -1) {
// has "thatClass"
}Esta función 'hasClass' funciona en IE8 +, FireFox y 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);
}Bueno, todas las respuestas anteriores son bastante buenas, pero aquí hay una pequeña función simple que preparé. Funciona bastante bien
function hasClass(el, cn){
var classes = el.classList;
for(var j = 0; j < classes.length; j++){
if(classes[j] == cn){
return true;
}
}
}classListtiene un containsmétodo?
¿Qué opinas sobre este enfoque?
<body class="thatClass anotherClass"> </body>
var bodyClasses = document.querySelector('body').className;
var myClass = new RegExp("thatClass");
var trueOrFalse = myClass.test( bodyClasses );class="nothatClassIsnt"?
Aquí está la forma más 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");
}
}
}
classpropiedad (que en el caso de varias clases tendrá varios nombres de clase en orden aleatorio separados por un espacio) y verificar si su nombre de clase está en ella. No es terriblemente difícil, pero sigue siendo terriblemente inconveniente si no es para aprender :)