¿Cómo verificar si un elemento NO tiene una clase específica?


232

¿Cómo verifico si no hay una clase? Por ejemplo, sé cómo verificar si tiene la clase "prueba", pero ¿cómo verifico si no tiene la clase "prueba"?

if($(this).hasClass("test")){
}

Respuestas:


484
if (!$(this).hasClass("test")) {

34
En el sentido de TIMTOWTDI, aquí hay una solución horrible: if($(this).is(":not(.test)"))> :)
Phrogz

66
TIMTOWTDIBSCINABTE
Fizzix

25
En caso de que alguien se pregunte: hay más de una forma de hacerlo, pero a veces la consistencia tampoco es algo malo.
Capitán Hipertexto

145

La respuesta de sdleihssirhc es, por supuesto, la correcta para el caso en la pregunta, pero solo como referencia si necesita seleccionar elementos que no tienen una clase determinada, puede usar el selector no :

// select all divs that don't have class test
$( 'div' ).not( ".test" );
$( 'div:not(.test)' );  // <-- alternative 

8
En mi humilde opinión, su respuesta es la mejor. Si la respuesta de sdleihssirhc es correcta, esta pregunta no tiene nada que ver con jQuery y se formularía mejor como 'dada alguna condición, ¿cómo pruebo que esa condición NO es verdadera en Javascript'? Lo que queremos con jQuery es operar en colecciones enteras de elementos DOM tan fácil como podamos en objetos individuales. Su respuesta proporciona justamente esa solución. +1
Stijn de Witt

1
@byronyasgur En el contexto de la pregunta original, el afiche quería probar si cierto elemento conocido no tenía la clase. Este código selecciona todos los elementos que no tienen la clase, por lo que no resolvería el problema del póster. No recuerdo por qué publiqué esto en primer lugar.
JJJ

14

Seleccione el elemento (o grupo de elementos) que tenga la clase "abc", que no tenga la clase "xyz":

    $('.abc:not(".xyz")')

Al seleccionar CSS normal puede usar .abc:not(.xyz).


6

usa el método .not () y busca un atributo:

$('p').not('[class]');

Compruébelo aquí: http://jsfiddle.net/AWb79/


8
Esto está completamente mal. Los corchetes no son para clases sino que se usan para selectores que identifican atributos.
Misterparker

1
En realidad es completamente correcto. La '[clase]' está identificando correctamente el atributo de (no) tener una clase.
Deborah el

Las clases de @Misterparker son atributos.
Matthew Cira

esto verifica si el atributo está presente, no el caso si un elemento tiene una clase específica, como en el valor de la clase
Marque el

6

Puedes probar esto:

<div id="div1" class="myClass">there is a class</div>
<div id="div2"> there is no class2 </div>

$(document).ready(function(){
    $("#div2").not('.myClass');  // do not have `myClass` class.
});

Esta respuesta no agrega ningún valor a la página, se publicó 7 años antes. Nunca publique contenido de solo código y duplicado.
mickmackusa


0

Después de leer esto 6 años más tarde, pensé que también podría hacerlo, también en la línea TIMTOWTDI ...: D, con la esperanza de que no sea una "etiqueta JS" incorrecta.

Normalmente configuro una var con la condición y luego me refiero a ella más adelante ... es decir;

// var set up globally OR locally depending on your requirements
var hC;

function(el) {
  var $this = el;
  hC = $this.hasClass("test");

  // use the variable in the conditional statement
  if (!hC) {
    //
  }
}

Aunque debo mencionar que hago esto porque uso principalmente el operador ternario condicional y quiero un código limpio. Entonces, en este caso, todo lo que tendría es esto:

hC ? '' : foo(x, n) ;
   // OR -----------
!hC ? foo(x, n) : '' ;

...en lugar de esto:

$this.hasClass("test") ? '' : foo(x, n) ;
   // OR -----------
(!$this.hasClass("test")) ? foo(x, n) : '' ;

0

No sé por qué, pero la respuesta aceptada no funcionó para mí. En cambio, esto funcionó:

if ($(this).hasClass("test") !== false) {}

Esto realmente comprueba si TIENE clase "prueba". Para verificar si NO tiene la clase "prueba", necesitaría tener "=== falso" o "! == verdadero" en lugar de "! == falso".
Lisa Cerilli
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.