javascript - remove - JQuery.hasClass para varios valores en una sentencia if
not hasclass jquery (10)
Tengo una declaración simple como tal:
if ($(''html'').hasClass(''m320'')) {
// do stuff
}
Esto funciona como se esperaba. Sin embargo, quiero agregar más clases a la if statement para verificar si alguna de las clases está presente en la etiqueta <html> . Lo necesito para que no sean todos, sino solo la presencia de al menos una clase, pero puede ser más.
Mi caso de uso es que tengo clases (por ejemplo, m320 , m768 ) agregadas para varios anchos de ventana m320 , por lo que solo quiero ejecutar ciertos Jquery si es un ancho específico (clase).
Esto es lo que he intentado hasta ahora:
1.
if ($(''html'').hasClass(''m320'', ''m768'')) {
// do stuff
}
2.
if ($(''html'').hasClass(''m320'')) || ($(''html'').hasClass(''m768'')) {
// do stuff
}
3.
if ($(''html'').hasClass([''m320'', ''m768''])) {
// do stuff
}
Sin embargo, ninguno de estos parece funcionar. No estoy seguro de lo que estoy haciendo mal, pero lo más probable es que mi sintaxis o estructura.
Acabas de tener algunos paréntesis desordenados en tu segundo intento.
var $html = $("html");
if ($html.hasClass(''m320'') || $html.hasClass(''m768'')) {
// do stuff
}
Aquí hay una ligera variación en la respuesta ofrecida por jfriend00:
$.fn.hasAnyClass = function() {
var classes = arguments[0].split(" ");
for (var i = 0; i < classes.length; i++) {
if (this.hasClass(classes[i])) {
return true;
}
}
return false;
}
Permite el uso de la misma sintaxis que .addClass () y .removeClass (). por ejemplo, .hasAnyClass(''m320 m768'') Necesita .hasAnyClass(''m320 m768'') balas, por supuesto, ya que asume al menos un argumento.
El método hasClass aceptará una matriz de nombres de clase como un argumento, puede hacer algo como esto:
$(document).ready(function() {
function filterFilesList() {
var rows = $(''.file-row'');
var checked = $("#filterControls :checkbox:checked");
if (checked.length) {
var criteriaCollection = [];
checked.each(function() {
criteriaCollection.push($(this).val());
});
rows.each(function() {
var row = $(this);
var rowMatch = row.hasClass(criteriaCollection);
if (rowMatch) {
row.show();
} else {
row.hide(200);
}
});
} else {
rows.each(function() {
$(this).show();
});
}
}
$("#filterControls :checkbox").click(filterFilesList);
filterFilesList();
});
Esta puede ser otra solución:
if ($(''html'').attr(''class'').match(/m320|m768/)) {
// do stuff
}
Según jsperf.com también es bastante rápido.
He probado varias clases en un parámetro del método hasClass y funciona como se esperaba.
$(''el'').hasClass(''first-class second-class'');
Esto es en caso de que necesite ambas clases presentes. Para cualquiera de los dos o solo use la lógica ||
$(''el'').hasClass(''first-class'') || $(''el'').hasClass(''second-class'')
Siéntase libre de optimizar según sea necesario
Para cualquiera que se pregunte acerca de algunos de los diferentes aspectos de rendimiento con todas estas diferentes opciones, he creado un caso jsperf aquí: jsperf
En resumen, usar element.hasClass(''class'') es el más rápido.
La siguiente mejor apuesta es usar elem.hasClass(''classA'') || elem.hasClass(''classB'') elem.hasClass(''classA'') || elem.hasClass(''classB'') . Una nota sobre esta: el orden importa! Si es más probable que se encuentre la clase ''classA'', ¡enumérela primero! O las declaraciones de condición regresan tan pronto como se cumpla una de ellas.
El peor desempeño fue el uso de element.is(''.class'') .
También figuran en la jsperf la función de CyberMonk y la solución de Kolja .
Por diversión, escribí un pequeño método complementario jQuery que buscará cualquiera de los múltiples nombres de clase:
$.fn.hasAnyClass = function() {
for (var i = 0; i < arguments.length; i++) {
if (this.hasClass(arguments[i])) {
return true;
}
}
return false;
}
Luego, en tu ejemplo, podrías usar esto:
if ($(''html'').hasAnyClass(''m320'', ''m768'')) {
// do stuff
}
Puedes pasar tantos nombres de clase como quieras.
Aquí hay una versión mejorada que también le permite pasar varios nombres de clase separados por un espacio:
$.fn.hasAnyClass = function() {
for (var i = 0; i < arguments.length; i++) {
var classes = arguments[i].split(" ");
for (var j = 0; j < classes.length; j++) {
if (this.hasClass(classes[j])) {
return true;
}
}
}
return false;
}
if ($(''html'').hasAnyClass(''m320 m768'')) {
// do stuff
}
Demostración de trabajo: http://jsfiddle.net/jfriend00/uvtSA/
Prueba esto:
if ($(''html'').hasClass(''class1 class2'')) {
// do stuff
}
Puedes usar is() lugar de hasClass() :
if ($(''html'').is(''.m320, .m768'')) { ... }
var classes = $(''html'')[0].className;
if (classes.indexOf(''m320'') != -1 || classes.indexOf(''m768'') != -1) {
//do something
}