Wie überprüfe ich, ob ein Element KEINE bestimmte Klasse hat?


232

Wie überprüfe ich, ob es keine Klasse gibt? Ich weiß zum Beispiel, wie ich überprüfen kann, ob die Klasse "test" vorhanden ist, aber wie kann ich überprüfen, ob die Klasse "test" nicht vorhanden ist?

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

Antworten:


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

34
Im Sinne von if($(this).is(":not(.test)"))
TIMTOWTDI

6
TIMTOWTDIBSCINABTE
Fizzix

25
Für den Fall, dass sich jemand wundert: Es gibt mehr als einen Weg, dies zu tun, aber manchmal ist Konsistenz auch keine schlechte Sache.
Kapitän Hypertext

145

Die Antwort von sdleihssirhc ist natürlich die richtige für den Fall in der Frage, aber nur als Referenz, wenn Sie Elemente auswählen müssen, die keine bestimmte Klasse haben, können Sie den Not- Selektor verwenden:

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

8
IMHO ist Ihre Antwort am besten. Wenn die Antwort von sdleihssirhc richtig ist, hatte diese Frage nichts mit jQuery zu tun und würde besser formuliert werden als "unter bestimmten Bedingungen, wie teste ich, dass diese Bedingung in Javascript NICHT wahr ist". Mit jQuery möchten wir ganze Sammlungen von DOM-Elementen genauso einfach wie möglich mit einzelnen Objekten bearbeiten. Ihre Antwort bietet genau diese Lösung. +1
Stijn de Witt

1
@byronyasgur Im Kontext der ursprünglichen Frage wollte das Poster testen, ob ein bestimmtes bekanntes Element die Klasse nicht hatte. Dieser Code wählt alle Elemente aus, die nicht über die Klasse verfügen, sodass das Problem des Posters nicht gelöst wird. Ich erinnere mich nicht, warum ich das überhaupt gepostet habe.
JJJ

14

Wählen Sie ein Element (oder eine Gruppe von Elementen) mit der Klasse "abc" und nicht mit der Klasse "xyz" aus:

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

Bei der Auswahl von normalem CSS können Sie verwenden .abc:not(.xyz).


6

Verwenden Sie die Methode .not () und suchen Sie nach einem Attribut:

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

Überprüfen Sie es hier: http://jsfiddle.net/AWb79/


8
Das ist völlig falsch. Klammern sind nicht für Klassen, sondern werden für Selektoren verwendet, die Attribute identifizieren.
Misterparker

1
Eigentlich ist es völlig richtig. Die '[Klasse]' identifiziert das Attribut, eine Klasse zu haben (nicht).
Deborah

@ Misterparker-Klassen sind Attribute.
Matthew Cira

Diese prüft , ob das Attribut vorhanden ist, nicht der Fall , wenn ein Element eine bestimmte Klasse hat, wie in Klassenwert
Mark

6

Sie können dies versuchen:

<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.
});

Diese Antwort bringt keinen Mehrwert für die Seite, sie wurde 7 Jahre früher veröffentlicht. Bitte posten Sie niemals nur Code und duplizieren Sie Inhalte.
Mickmackusa


0

Ich las diese 6 Jahre später durch und dachte, ich würde es auch versuchen, auch im Sinne von TIMTOWTDI ...: D, in der Hoffnung, dass es nicht die falsche 'JS-Etikette' ist.

Normalerweise richte ich eine Variable mit der Bedingung ein und beziehe mich später darauf.

// 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) {
    //
  }
}

Obwohl ich erwähnen sollte, dass ich dies tue, weil ich hauptsächlich den bedingten ternären Operator verwende und sauberen Code möchte. In diesem Fall hätte ich nur Folgendes:

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

...an Stelle von:

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

0

Ich weiß nicht warum, aber die akzeptierte Antwort hat bei mir nicht funktioniert. Stattdessen funktionierte dies:

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

Dies prüft tatsächlich, ob es die Klasse "Test" hat. Um zu überprüfen, ob es KEINE Klasse "test" gibt, müssten Sie "=== false" oder "! == true" anstelle von "! == false" haben.
Lisa Cerilli
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.