Bagaimana cara memeriksa apakah suatu elemen TIDAK memiliki kelas tertentu?


232

Bagaimana saya memeriksa jika tidak ada kelas. Misalnya, saya tahu cara mengecek untuk melihat apakah kelasnya memiliki "tes", tetapi bagaimana cara memeriksa untuk melihat apakah kelas itu tidak memiliki "tes" kelas?

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

Jawaban:


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

34
Dalam nada TIMTOWTDI, inilah solusi mengerikan: if($(this).is(":not(.test)"))> :)
Phrogz

6
TIMTOWTDIBSCINABTE
Fizzix

25
Jika ada yang bertanya-tanya: Ada Lebih Dari Satu Cara Untuk Melakukannya, Tetapi Terkadang Konsistensi Bukan Hal Yang Buruk.
Kapten Hypertext

145

Jawaban sdleihssirhc tentu saja yang benar untuk kasus dalam pertanyaan, tetapi hanya sebagai referensi jika Anda perlu memilih elemen yang tidak memiliki kelas tertentu, Anda dapat menggunakan pemilih yang tidak :

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

8
IMHO jawaban Anda yang terbaik. Jika jawaban sdleihssirhc benar daripada pertanyaan ini tidak ada hubungannya dengan jQuery dan akan lebih baik diformulasikan sebagai 'diberikan beberapa kondisi, bagaimana saya menguji bahwa kondisi itu TIDAK benar dalam Javascript'. Apa yang kita inginkan dengan jQuery beroperasi pada seluruh koleksi elemen DOM semudah yang kita bisa pada objek tunggal. Jawaban Anda hanya memberikan solusi itu. +1
Stijn de Witt

1
@byronyasgur Dalam konteks pertanyaan awal, poster ingin menguji apakah elemen tertentu yang diketahui tidak memiliki kelas. Kode ini memilih semua elemen yang tidak memiliki kelas, sehingga tidak akan menyelesaikan masalah poster. Saya tidak ingat mengapa saya memposting ini di tempat pertama.
JJJ

14

Pilih elemen (atau grup elemen) yang memiliki kelas "abc", tidak memiliki kelas "xyz":

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

Saat memilih CSS biasa yang dapat Anda gunakan .abc:not(.xyz).


6

gunakan metode .not () dan periksa atribut:

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

Lihat di sini: http://jsfiddle.net/AWb79/


8
Ini sepenuhnya salah. Kurung bukan untuk kelas tetapi digunakan untuk penyeleksi atribut yang mengidentifikasi atribut.
Misterparker

1
Sebenarnya itu sepenuhnya benar. '[Kelas]' dengan benar mengidentifikasi atribut (tidak) memiliki kelas.
Deborah

Kelas @Misterparker adalah atribut.
Matthew Cira

ini memeriksa apakah atribut ada, bukan kasus jika elemen memiliki kelas tertentu, seperti dalam nilai kelas
Mark

6

Anda dapat mencoba ini:

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

Jawaban ini tidak menambah nilai apa pun pada halaman, itu diposkan 7 tahun lebih mudah. Harap jangan pernah mengirim hanya kode dan menggandakan konten.
mickmackusa


0

membaca ini 6 tahun kemudian dan berpikir saya juga akan mengambil hack itu, juga dalam nada TIMTOWTDI ...: D, berharap itu tidak salah 'etiket JS'.

Saya biasanya mengatur var dengan kondisi dan kemudian merujuknya nanti..yaitu;

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

Meskipun saya harus menyebutkan bahwa saya melakukan ini karena saya terutama menggunakan operator ternary kondisional dan ingin kode bersih. Jadi dalam hal ini, yang saya miliki adalah ini:

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

... alih-alih ini:

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

0

Saya tidak tahu mengapa, tetapi jawaban yang diterima tidak berhasil untuk saya. Alih-alih ini berhasil:

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

Ini benar-benar memeriksa apakah TIDAK memiliki "tes" kelas. Untuk memeriksa apakah TIDAK memiliki "test" kelas, Anda harus memiliki "=== false", atau "! == true" daripada "! == false".
Lisa Cerilli
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.