Menentukan apakah suatu elemen memiliki kelas CSS dengan jQuery

173

Saya bekerja dengan jQuery dan mencari untuk melihat apakah ada cara mudah untuk menentukan apakah elemen memiliki kelas CSS spesifik yang terkait dengannya.

Saya memiliki id elemen, dan kelas CSS yang saya cari. Saya hanya perlu bisa, dalam pernyataan if, melakukan perbandingan berdasarkan keberadaan kelas itu pada elemen.

javascript jquery css Penjual Mitchel
sumber
1
Jika Anda ingin melakukannya tanpa jQuery, “hasClass” dengan javascript?
Oriol

Jawaban:

237

Gunakan hasClassmetode:

jQueryCollection.hasClass(className);

atau

$(selector).hasClass(className);

Argumennya adalah (jelas) string yang mewakili kelas yang Anda periksa, dan mengembalikan boolean (sehingga tidak mendukung perangkaian seperti kebanyakan metode jQuery).

Catatan: Jika Anda memberikan classNameargumen yang berisi spasi, itu akan dicocokkan secara harfiah dengan classNamestring elemen koleksi . Jadi jika, misalnya, Anda memiliki elemen,

<span class="foo bar" />

maka ini akan kembali true:

$('span').hasClass('foo bar')

dan ini akan kembali false:

$('span').hasClass('bar foo')
$('span').hasClass('foo  bar')
kelopak mata
sumber
4
Saya tidak setuju. Dokumentasi diatur dalam kategori, tetapi Anda dapat dengan mudah melihat semua metode juga secara alfabet. Semuanya datang dengan contoh, dan bagian komentar biasanya membersihkan semua yang tertinggal. jQuery memiliki BANYAK fungsi dan utilitas luar biasa dan perlu beberapa pembelajaran untuk menemukan semuanya. -EDIT- Itu masuk akal, itu pasti datang jauh.
Trafalmadorian
1
@Trafalmadorian, saya telah menghapus komentar asli saya karena situasinya telah berubah. Awalnya Anda telah memposting semuanya sebelum -EDIT-, dan saya menjawab bahwa komentar saya tentang kualitas dokumentasi tidak lagi relevan tetapi merujuk pada sistem mereka sebelumnya (MediaWiki). Anda kemudian menghapus komentar Anda sebelumnya dan beristirahat dengan -EDIT-. Saya harap pembersihan ini sedikit lebih jelas dan tidak menyesatkan pembaca di masa mendatang.
kelopak mata
@daniloquio, itu adalah jika Anda pergi langsung ke api.jquery.com ... untuk beberapa alasan website masih link ke versi wiki mengerikan di docs.jquery.com
eyelidlessness
21

dari FAQ

elem = $("#elemid");
if (elem.is (".class")) {
   // whatever
}

atau:

elem = $("#elemid");
if (elem.hasClass ("class")) {
   // whatever
}
Javier
sumber
3
hati-hati dengan .is () - "Metode is () di jQuery akan mengembalikan true jika APA SAJA dari elemen dalam koleksi saat ini cocok dengan APA SAJA elemen dalam koleksi berbasis is" - bennadel.com/blog/…
zack
11

Adapun negasi, jika Anda ingin tahu jika suatu elemen tidak memiliki kelas, Anda bisa melakukan seperti kata Mark.

if (!currentPage.parent().hasClass('home')) { do what you want }
VinnyG
sumber
3

Tanpa jQuery:

var hasclass=!!(' '+elem.className+' ').indexOf(' check_class ')+1;

Atau:

function hasClass(e,c){
    return e&&(e instanceof HTMLElement)&&!!((' '+e.className+' ').indexOf(' '+c+' ')+1);
}
/*example of usage*/
var has_class_medium=hasClass(document.getElementsByTagName('input')[0],'medium');

Ini WAY lebih cepat dari jQuery!

Ismael Miguel
sumber
mengapa kamu lakukan ...&&!!((' '+e.classname+' ').indexOf(' '+c+' ')+1), dan bukan hanya &&!(' '+e.classname+' ').indexOf(' '+c+' ')?
Blexy
1
Karena indexOfpengembalian -1adalah kelas tidak ada. Jika saya melakukannya !!-1, itu akan menjadi true. Karena saya lakukan !!-1+1, itu akan salah. Cara yang lebih baik adalah ...&&!!~(' '+e.className+' ').indexOf(' '+c+' '), tetapi saya tidak ingat saat itu.
Ismael Miguel
Maaf, maksud saya...&&~(' '+e.className+' ').indexOf(' '+c+' ')
Ismael Miguel
3

Demi membantu siapa pun yang mendarat di sini tetapi sebenarnya mencari cara jQuery gratis untuk melakukan ini:

element.classList.contains('your-class-name')
Derek Ekins
sumber
0 
 $('.segment-name').click(function () {
    if($(this).hasClass('segment-a')){
        //class exist
    }
});
anggur
sumber
0

Dalam kasus saya, saya menggunakan fungsi 'is' jQuery, saya menambahkan elemen HTML dengan kelas css berbeda, saya mencari kelas tertentu di tengahnya, jadi saya menggunakan "is" alternatif yang baik untuk memeriksa kelas yang secara dinamis ditambahkan ke elemen html, yang sudah memiliki kelas css lainnya, itu adalah alternatif lain yang bagus.

contoh sederhana: 

 <!--element html-->
 <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

 <!--jQuery "is"-->
 $('#menu').is('.cbp-spmenu-open');

contoh lanjutan: 

 <!--element html-->
    <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom cbp-spmenu-open" id="menu">somethings here... </nav>

   <!--jQuery "is"-->
    if($('#menu').is('.cbp-spmenu-bottom.cbp-spmenu-open')){
       $("#menu").show();
    }
Eduardo Paz
sumber