jQuery: Periksa apakah div dengan nama kelas tertentu ada

235

Menggunakan jQuery, saya secara terprogram menghasilkan banyak divseperti ini:

<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>

Di tempat lain dalam kode saya, saya perlu mendeteksi apakah DIV ini ada. Nama kelas untuk div adalah sama tetapi perubahan ID untuk setiap div. Adakah yang tahu cara mendeteksi mereka menggunakan jQuery?

avatar
sumber

Jawaban:

424

Anda dapat menyederhanakan ini dengan memeriksa objek pertama yang dikembalikan dari JQuery seperti:

if ($(".mydivclass")[0]){
    // Do something if class exists
} else {
    // Do something if class does not exist
}

Dalam hal ini jika ada nilai kebenaran pada indeks first ( [0]), maka asumsikan kelas ada.

Sunting 04/10/2013: Saya telah membuat test case jsperf di sini .

Shaz
sumber
Poin bagus, bagaimanapun juga itu hanya pencarian properti. Saya tidak peduli dengan empat karakter, tetapi ini bisa lebih jelas tergantung pada konteks ...
TJ Crowder
Saya akhirnya menggunakan solusi ini meskipun ada solusi lain yang berfungsi juga. Terima kasih atas jawaban cepatnya.
avatar
1
Menariknya, Anda mungkin berpikir melemparkan :firstdi sana akan membantu kinerja (tidak tahu apakah kinerja merupakan kriteria penting untuk @itgorilla), tetapi apakah itu bervariasi secara liar oleh peramban, mungkin karena itu mengubah fitur asli yang dapat digunakan jQuery untuk melakukan pilihan. Inilah kasus uji di mana div itu ada , dan di sini ada di mana itu tidak ada .
TJ Crowder
Dan jika saya tidak ingin mengeksekusi kode jika kelas tidak ada?
Thomas Sebastian
1
@ThomasSebastian Cobaif (!$(".mydivclass")[0]){ /* do stuff */ }
Shaz
117

Anda dapat menggunakan size(), tetapi jQuery menyarankan Anda menggunakan panjang untuk menghindari overhead panggilan fungsi lain:

$('div.mydivclass').length

Begitu:

// since length is zero, it evaluates to false
if ($('div.mydivclass').length) {

http://api.jquery.com/size/

http://api.jquery.com/length/

MEMPERBARUI

Jawaban yang dipilih menggunakan tes perf, tetapi sedikit cacat karena itu juga termasuk pemilihan elemen sebagai bagian dari perf, yang bukan apa yang sedang diuji di sini. Berikut ini adalah tes perf yang diperbarui:

http://jsperf.com/check-if-div-exists/3

Uji coba pertama saya menunjukkan bahwa pengambilan properti lebih cepat daripada pencarian indeks, meskipun IMO itu cukup dapat diabaikan. Saya masih lebih suka menggunakan panjang untuk saya itu lebih masuk akal dengan maksud kode daripada kondisi yang lebih singkat.

Eli
sumber
3
Menurut tautan yang Anda berikan ke alat di jsperf.com, .lengthsaat ini menawarkan kinerja rata-rata terbaik.
gmeben
Melayani kebutuhan saya dengan dampak kinerja terkecil untuk pemeriksaan.
David O'Regan
77

Tanpa jQuery:

JavaScript asli selalu akan menjadi lebih cepat. Dalam hal ini: (contoh)

if (document.querySelector('.mydivclass') !== null) {
    // .. it exists
}

Jika Anda ingin memeriksa untuk melihat apakah elemen induk berisi elemen lain dengan kelas tertentu, Anda bisa menggunakan salah satu dari berikut ini. (contoh)

var parent = document.querySelector('.parent');

if (parent.querySelector('.child') !== null) {
    // .. it exists as a child
}

Atau, Anda dapat menggunakan .contains()metode pada elemen induk. (contoh)

var parent = document.querySelector('.parent'),
    child = document.querySelector('.child');

if (parent.contains(child)) {
    // .. it exists as a child
}

..dan akhirnya, jika Anda ingin memeriksa untuk melihat apakah elemen yang diberikan hanya berisi kelas tertentu, gunakan:

if (el.classList.contains(className)) {
    // .. el contains the class
}
Josh Crozier
sumber
57
$('div').hasClass('mydivclass')// Returns true if the class exist.
Hussein
sumber
3
Benar ini adalah alternatif, tetapi yang mahal. Akan lebih lambat dari pendekatan yang digunakan dalam jawaban sebelumnya ( nyata lebih lambat, pada beberapa browser), dan memiliki dampak memori yang jauh lebih besar juga (jQuery memiliki untuk membangun sebuah array dari semua dari divelemen pada halaman, kemudian kembali dan loop melalui mereka untuk melihat apakah mereka memiliki kelas itu, semua membuang array di akhir).
TJ Crowder
3
@tj hasClassadalah 33% lebih cepat dari penyeleksi lainnya di sini. Periksa jsperf.com/hasclass00
Hussein
1
@ Hussein: Hanya dengan test case yang benar-benar tidak realistis (dua divelemen) yang meminggirkan masalah yang saya soroti (membuat array). Cobalah dengan sekelompok div : jsperf.com/hasclass00/2 Ini 63% lebih lambat pada salinan Chrome saya, 43% lebih lambat pada salinan Firefox saya, 98% (!) Lebih lambat di Opera. Tetapi lebih lanjut, masuk akal bahwa lebih lambat untuk membangun daftar divs dan kemudian mencarinya, daripada memberikan mesin pemilih semua informasi yang dibutuhkan.
TJ Crowder
1
@ Hussein: Perhatikan bahwa saya sangat adil, dan memberikan bukti-bukti seimbang untuk klaim Anda. Saya minta maaf jika saya menyentuh saraf, yang sepertinya terjadi terakhir kali juga. Santai saja, ini bukan penghinaan pribadi, ini diskusi teknis. Kulit tebal dan pikiran terbuka bermanfaat di StackOverflow.
TJ Crowder
1
@ Hussein: Selektor HTML5 css berarti bahwa ini hampir pasti akan selalu menjadi cara terburuk untuk melakukan ini. -1 karena tidak hanya menghapus posting Anda.
Stefan Kendall
46

Ini adalah solusi tanpa menggunakan Jquery

var hasClass = element.classList.contains('class name to search');
// hasClass is boolean
if(hasClass === true)
{
     // Class exists
}

tautan referensi

Ronald
sumber
1
classList hanya didukung di IE10 +: caniuse.com/classlist . Anda harus menambahkan polyfill github.com/eligrey/classList.js atau menulis metode Anda sendiri
AFD
18

Sederhana saja ...

if ($('.mydivclass').length > 0) {
  //do something
}
metode tindakan
sumber
10

Untuk menguji divelemen secara eksplisit:

if( $('div.mydivclass').length ){...}

Stefan Kendall
sumber
Ini mungkin sedikit lebih lambat daripada .mydivclasstergantung pada versi browser dan jQuery.
Stefan Kendall
Benar, tetapi OP secara khusus mengatakan "jQuery - periksa apakah div dengan nama kelas tertentu ada " (penekanan saya), sehingga Anda mendapatkan suara saya untuk menjadi yang pertama yang benar-benar memasukkan divbagian dari pemilih.
TJ Crowder
7

Kode sederhana diberikan di bawah ini:

if ($('.mydivclass').length > 0) {
   //Things to do if class exist
}

Untuk menyembunyikan div dengan id partuler:

if ($('#'+given_id+'.mydivclass').length > 0) {
   //Things to do if class exist
}
Dam Jitendra
sumber
3

Berikut ini beberapa cara:

1.  if($("div").hasClass("mydivclass")){
    //Your code

    //It returns true if any div has 'mydivclass' name. It is a based on the class name
    }

2. if($("#myid1").hasClass("mydivclass")){
    //Your code


    //  It returns true if specific div(myid1) has this class "mydivclass" name. 
    //  It is a  based on the specific div id's.
    }           
3. if($("div[class='mydivclass']").length > 0){
    //Your code

   // It returns all the divs whose class name is "mydivclass"
   //  and it's length would be greater than one.
    }

Kita dapat menggunakan salah satu cara yang ditentukan di luar negeri berdasarkan persyaratan.

Sheo Dayal Singh
sumber
2
if ($(".mydivclass").size()){
   // code here
}

The size()Metode hanya mengembalikan jumlah elemen yang yang ditunjuk oleh pemilih jQuery - dalam hal ini jumlah elemen dengan kelas mydivclass. Jika mengembalikan 0, ekspresi salah, dan karena itu tidak ada, dan jika mengembalikan nomor lain, div harus ada.

Herman Schaaf
sumber
1
Mengapa memanggil metode ketika ada lengthproperti? Juga, ini memeriksa elemen apa pun dengan kelas itu, bukan hanya a div. (Sekarang, itu mungkin yang dimaksud OP, bahkan jika bukan apa yang dia katakan.) Lihat jawaban Stefan Kendall yang melakukan apa yang sebenarnya dikatakan OP (meskipun, sekali lagi, mereka mungkin berarti apa yang telah Anda lakukan).
TJ Crowder
1
@TJ Crowder: Yah, rasanya pribadi - Saya hanya merasakan metode size () ada - mengapa tidak menggunakannya. Overhead tambahan dalam memanggil fungsi (kecuali jika Anda melakukannya 1000 kali dalam satu lingkaran) sangat minim, saya lebih suka mencari sedikit kejelasan dalam kode. Pada poin kedua Anda - ya, saya mengubah jawaban asli saya untuk menghapus divbagian itu, karena dua alasan: 1) pemilih tidak terikat dengan fakta bahwa OP menggunakan divelemen (itu bisa berubah di masa depan), dan 2) di sebagian besar browser dan versi jQuery, AFAIK, ini harus lebih cepat.
Herman Schaaf
"Aku hanya merasakan metode ukuran () ada - mengapa tidak menggunakannya" Um, oke. The lengthproperti di sana, mengapa tidak menggunakannya? Tetapi jika itu pilihan Anda, wajar saja. Di sisi lain, saya tidak tahu Anda telah mengeditnya. Jika saya akan melakukan itu, saya akan meninggalkannya (lagi, dia secara khusus mengatakan "... jika div dengan ..." (penekanan saya) dan kemudian menyebutkan tambahan bahwa jika tidak masalah apakah itu itu divatau tidak, Anda bisa parit bagian itu. Tapi apa pun. :-)
TJ Crowder
@ TT Crowder: Ya, saya pikir kita terlalu memikirkan ini.
Herman Schaaf
@TJ Crowder: Tapi dalam pembelaan saya, meskipun ini bukan tempat untuk diskusi: Saya merasa size()metode ini ada untuk memperjelas bahwa Anda menghitung jumlah elemen dalam pemilih jQuery, dan bukan sembarang array lama. Tetapi sekali lagi, itu hanya kesukaan saya.
Herman Schaaf
2

periksa apakah div ada dengan kelas tertentu

if ($(".mydivclass").length > 0) //it exists 
{

}
neebz
sumber
2
if($(".myClass")[0] != undefined){
  // it exists
}else{
  // does not exist
}
stairie
sumber
2
Tampaknya hampir identik dengan jawaban yang ada ini .
Pang
Ya, memang ... tapi saya mencoba jawaban itu dan tidak berhasil. Ketika saya menambahkan perbandingan ke 'tidak terdefinisi', sepertinya berfungsi dengan baik.
stairie
2
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
Tuan Truong Quang
sumber
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan meningkatkan nilai jangka panjangnya.
Vishal Chhodwani
2

Di Jquery Anda dapat menggunakan seperti ini.

if ($(".className")[0]){

   // Do something if class exists

} else {

// Do something if class does not exist

}

Dengan JavaScript

if (document.getElementsByClassName("className").length > 0) {

// Do something if class exists

}else{

    // Do something if class does not exist

}
Shaan Ansari
sumber
2

Berikut ini adalah contoh solusi untuk kelas cek (hasClass) dalam Javascript:

const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
   // do something if 'hasClass' is exist.
}
Rifat Wahid Alif
sumber
1

Cara terbaik dalam Javascript:

if (document.getElementsByClassName("search-box").length > 0) {
// do something
}
JMJ
sumber
1

if ($ ("# myid1"). hasClass ("mydivclass")) {// Lakukan apa saja}

Thilina
sumber
Tolong beri beberapa penjelasan untuk jawaban Anda
dieksekusi
0

Gunakan ini untuk mencari seluruh halaman

if($('*').hasClass('mydivclass')){
// Do Stuff
}
Arosha De Silva
sumber