JQuery .hasClass para múltiples valores en una declaración if

Question 1

Tengo una simple declaración if como tal:

if ($('html').hasClass('m320')) {

// do stuff 

}

Esto funciona como se esperaba. Sin embargo, quiero agregar más clases para if statementverificar si alguna de las clases está presente en la <html>etiqueta. 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, por lo que solo quiero ejecutar cierto Jquery si es un ancho específico (clase).

Esto es lo que he probado 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 qué estoy haciendo mal, pero lo más probable es que mi sintaxis o estructura.

Question 2

Acaba de tener algunos paréntesis desordenados en su segundo intento.

var $html = $("html");

if ($html.hasClass('m320') || $html.hasClass('m768')) {

  // do stuff 

}

Question 3

Podrías usar en is()lugar de hasClass():

if ($('html').is('.m320, .m768')) { ... }

Question 4

Para divertirme, escribí un pequeño método de complemento de jQuery que verificará 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 su ejemplo, podría usar esto:

if ($('html').hasAnyClass('m320', 'm768')) {

// do stuff 

}

Puede pasar tantos nombres de clases como desee.

Aquí hay una versión mejorada que también le permite pasar varios nombres de clases 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/

Question 5

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.

Question 6

Para cualquiera que se pregunte acerca de algunos de los diferentes aspectos de rendimiento con todas estas opciones diferentes, he creado un caso de jsperf aquí: jsperf

En resumen, usando element.hasClass('class') es lo más rápido.

La siguiente mejor apuesta es usar elem.hasClass('classA') || elem.hasClass('classB') . Una nota sobre este: ¡el orden importa! Si es más probable que se encuentre la clase 'classA', ¡indíquela primero! Las declaraciones de condición OR regresan tan pronto como se cumple una de ellas.

El peor rendimiento con diferencia fue el uso element.is('.class') .

También se enumeran en jsperf la función de CyberMonk y la solución de Kolja .

Question 7

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 prueba de balas, por supuesto, ya que asume al menos un argumento.

Question 8

var classes = $('html')[0].className;

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
    //do something
}

Question 9

El método hasClass aceptará una matriz de nombres de clase como 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();
});

Question 10

Esto es en caso de que necesite ambas clases presentes. Para cualquiera o la lógica, simplemente use ||

$('el').hasClass('first-class') || $('el').hasClass('second-class')

Siéntase libre de optimizar según sea necesario

Question 11

Prueba esto:

if ($('html').hasClass('class1 class2')) {

// do stuff 

}

Answer 1

Tengo una simple declaración if como tal:

if ($('html').hasClass('m320')) {

// do stuff 

}

Esto funciona como se esperaba. Sin embargo, quiero agregar más clases para if statementverificar si alguna de las clases está presente en la <html>etiqueta. 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, por lo que solo quiero ejecutar cierto Jquery si es un ancho específico (clase).

Esto es lo que he probado 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 qué estoy haciendo mal, pero lo más probable es que mi sintaxis o estructura.

Answer 2

1

En lugar de adivinar cómo funciona una API, debería leer los documentos. api.jquery.com/hasclass Además, debe tener la consola de desarrollador a mano / abierta durante el desarrollo.

acantilados de la locura

Answer 3

posible duplicado de jQuery hasClass () - comprobar si hay más de una clase

Stephan Weinhold

Answer 4

74

Acaba de tener algunos paréntesis desordenados en su segundo intento.

var $html = $("html");

if ($html.hasClass('m320') || $html.hasClass('m768')) {

  // do stuff 

}

James Montagne
fuente

6

Realmente debería almacenar $('html')en caché en una variable en lugar de tener que buscarla varias veces.

epascarello

1

@epascarello Muy cierto, actualizando la respuesta para la posteridad.

James Montagne

Answer 5

6

Realmente debería almacenar $('html')en caché en una variable en lugar de tener que buscarla varias veces.

epascarello

Answer 6

1

@epascarello Muy cierto, actualizando la respuesta para la posteridad.

James Montagne

Answer 7

161

Podrías usar en is()lugar de hasClass():

if ($('html').is('.m320, .m768')) { ... }

elclanrs
fuente

3

Sí, hasClass()es probablemente más rápido, pero is()es mucho más conveniente la mayor parte del tiempo

elclanrs

1

Por cierto, aquí podemos ver los puntos de referencia de rendimiento para is()yhasClass()

Jignesh Gohel

1

Así que es mucho más lento, pero también super rápido en general. Si solo se escanean algunos elementos, parece que no es un gran problema para un código mucho más limpio.

jerclarke

Answer 8

3

Sí, hasClass()es probablemente más rápido, pero is()es mucho más conveniente la mayor parte del tiempo

elclanrs

Answer 9

1

Por cierto, aquí podemos ver los puntos de referencia de rendimiento para is()yhasClass()

Jignesh Gohel

Answer 10

1

Así que es mucho más lento, pero también super rápido en general. Si solo se escanean algunos elementos, parece que no es un gran problema para un código mucho más limpio.

jerclarke

Answer 11

Para divertirme, escribí un pequeño método de complemento de jQuery que verificará 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 su ejemplo, podría usar esto:

if ($('html').hasAnyClass('m320', 'm768')) {

// do stuff 

}

Puede pasar tantos nombres de clases como desee.

Aquí hay una versión mejorada que también le permite pasar varios nombres de clases 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/

Answer 12

Excelente, esto funciona bien ... ¡también en varios navegadores! Probado en FF e IE.

crmpicco

Answer 13

Hice una pequeña modificación para que se ajuste a las convenciones de jQuery para .addClass y .removeClass (). ( stackoverflow.com/a/14887517/170456 )

CyberMonk

Answer 14

25

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.

Kolja
fuente

¡Muy bonito, mucho más rápido!

Philip

9

Esto también coincidirá con la clase 'ZZZm320WWW' y similares. Intente ... emparejar (/ \ b (m320 | m768) \ b /) donde las \ b coinciden con el principio y el final de una palabra.

Juan Lanús

solo para dar seguimiento (7 años después :)). Esto funciona muy bien, pero si el elemento html que define no tiene ninguna clase, disparará un error "No se puede leer la propiedad" coincidente "de indefinida". Si este es el caso, pruebe si el elemento tiene el atributo 'clase' (o pruebe para asegurarse de que el atributo 'clase' no sea nulo).

Sanya

Answer 15

¡Muy bonito, mucho más rápido!

Philip

Answer 16

9

Esto también coincidirá con la clase 'ZZZm320WWW' y similares. Intente ... emparejar (/ \ b (m320 | m768) \ b /) donde las \ b coinciden con el principio y el final de una palabra.

Juan Lanús

Answer 17

solo para dar seguimiento (7 años después :)). Esto funciona muy bien, pero si el elemento html que define no tiene ninguna clase, disparará un error "No se puede leer la propiedad" coincidente "de indefinida". Si este es el caso, pruebe si el elemento tiene el atributo 'clase' (o pruebe para asegurarse de que el atributo 'clase' no sea nulo).

Sanya

Answer 18

Para cualquiera que se pregunte acerca de algunos de los diferentes aspectos de rendimiento con todas estas opciones diferentes, he creado un caso de jsperf aquí: jsperf

En resumen, usando element.hasClass('class') es lo más rápido.

La siguiente mejor apuesta es usar elem.hasClass('classA') || elem.hasClass('classB') . Una nota sobre este: ¡el orden importa! Si es más probable que se encuentre la clase 'classA', ¡indíquela primero! Las declaraciones de condición OR regresan tan pronto como se cumple una de ellas.

El peor rendimiento con diferencia fue el uso element.is('.class') .

También se enumeran en jsperf la función de CyberMonk y la solución de Kolja .

Answer 19

¡Muy interesante! No tenía idea de jsperf. Gracias por ilustrar todas las diferentes variaciones.

Danny Englander

Answer 20

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 prueba de balas, por supuesto, ya que asume al menos un argumento.

Answer 21

0

var classes = $('html')[0].className;

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
    //do something
}

adeneo
fuente

1

Si va a hacer eso, ¿por qué molestarse en usar jquery para obtener el elemento?

James Montagne

Bueno, no lo haría, pero ¿al menos solo recibe las clases una vez? Parecía tan aburrido sin un poco de jQuery, ¡así que reemplacé getElementsByTagName con un poco de magia jQ solo para ti!

adeneo

Answer 22

1

Si va a hacer eso, ¿por qué molestarse en usar jquery para obtener el elemento?

James Montagne

Answer 23

Bueno, no lo haría, pero ¿al menos solo recibe las clases una vez? Parecía tan aburrido sin un poco de jQuery, ¡así que reemplacé getElementsByTagName con un poco de magia jQ solo para ti!

adeneo

Answer 24

El método hasClass aceptará una matriz de nombres de clase como 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();
});

Answer 25

0

Esto es en caso de que necesite ambas clases presentes. Para cualquiera o la lógica, simplemente use ||

$('el').hasClass('first-class') || $('el').hasClass('second-class')

Siéntase libre de optimizar según sea necesario

qwerty_igor
fuente

1

Esto está mal. El primer ejemplo que dio funciona solo porque el método tiene una desinfección deficiente de la entrada y piensa que toda la cadena es un nombre de clase. No funciona si las clases están en un orden diferente o no están una al lado de la otra. Ver ejemplo: jsfiddle.net/0d57ekty

MightyPork

@MightyPork gracias por comprobarlo. tienes razón, solo debe usarse por clase

qwerty_igor

Answer 26

1

Esto está mal. El primer ejemplo que dio funciona solo porque el método tiene una desinfección deficiente de la entrada y piensa que toda la cadena es un nombre de clase. No funciona si las clases están en un orden diferente o no están una al lado de la otra. Ver ejemplo: jsfiddle.net/0d57ekty

MightyPork

Answer 27

@MightyPork gracias por comprobarlo. tienes razón, solo debe usarse por clase

qwerty_igor

Answer 28

-1

Prueba esto:

if ($('html').hasClass('class1 class2')) {

// do stuff 

}

Robert Łoziński
fuente

¡Bienvenido a Stack Overflow! Agregue una explicación de por qué este código ayuda al OP. Esto ayudará a proporcionar una respuesta de la que los futuros espectadores puedan aprender. Consulte Cómo responder para obtener más información.

Heretic Monkey

Answer 29

¡Bienvenido a Stack Overflow! Agregue una explicación de por qué este código ayuda al OP. Esto ayudará a proporcionar una respuesta de la que los futuros espectadores puedan aprender. Consulte Cómo responder para obtener más información.

Heretic Monkey

JQuery .hasClass para múltiples valores en una declaración if

Respuestas: