Periksa, gunakan jQuery, jika elemennya adalah 'display: none' atau blokir saat klik

240

Saya ingin memeriksa dan mengurutkan elemen yang disembunyikan. Apakah mungkin menemukan semua elemen dengan atribut displaydan nilai none?

jquery css

— Nicholas Francis
sumber

543

Anda dapat menggunakan : terlihat untuk elemen yang terlihat dan : disembunyikan untuk menemukan elemen yang tersembunyi. Elemen tersembunyi ini memiliki displayatribut yang disetel ke none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

Untuk memeriksa elemen tertentu.

if($('#yourID:visible').length == 0)
{

}

Elemen dianggap terlihat jika mereka menggunakan ruang dalam dokumen. Elemen yang terlihat memiliki lebar atau tinggi yang lebih besar dari nol, Referensi

Anda juga dapat menggunakan is () dengan:visible

if(!$('#yourID').is(':visible'))
{

}

Jika Anda ingin memeriksa nilai tampilan maka Anda dapat menggunakan css ()

if($('#yourID').css('display') == 'none')
{

}

Jika Anda menggunakan tampilan, nilai-nilai berikut displaydapat dimiliki.

display: tidak ada

display: inline

tampilan: blok

display: daftar-item

display: inline-block

Periksa daftar lengkap displaynilai yang mungkin di sini .

Untuk memeriksa properti tampilan dengan JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";

— Adil
sumber

baik, dalam skenario saya, masing-masing elemen memiliki ID, jadi triknya bekerja untuk saya :)

— Nicholas Francis

2

@NicholasFrancis, saya telah memperbarui jawaban saya untuk mengetahui semua elemen yang disembunyikan.

— Adil

Apakah itu memeriksa inline css juga. Saya telah display: block;menulis inline css yang berasal dari jquery. saya tidak dapat memeriksanya dengan metode Anda. tolong aku.

— Gaurav Manral

Apakah jQuery ditambahkan dan Anda mengakses elemen setelah ditambahkan ke DOM? Bisakah kamu tunjukkan kodenya? Akan lebih baik untuk membuat demo di jsfiddle.net

— Adil

Apa itu JavaScript equiv?

— TheBlackBenzKid

56

$("element").filter(function() { return $(this).css("display") == "none" });

— Deepanshu Goyal
sumber

7

+1: Ini sebenarnya lebih berguna daripada jawaban yang diterima untuk pertanyaan yang diajukan , karena ini akan berfungsi bahkan jika elemen induk memiliki style="display: none;". Jawaban menggunakan :visibledan :hiddenakan gagal jika Anda ingin visibilitas elemen tertentu dan elemen induk disembunyikan karena penyeleksi tersebut mengembalikan visibilitas keseluruhan pada halaman (yang bukan pertanyaan yang diajukan).

— Hilang Coding

Ini berfungsi saat menjalankan tes bersatu di lingkungan JS DOM.

— B01

Untuk plugin tabbing, pengaturannya visibility: 'hidden';dalam css, jadi cek akhirnya juga memeriksa:$(this).css('visibility') != 'hidden'

— phyatt

30

Ya, Anda bisa menggunakan fungsi css. Di bawah ini akan mencari semua div, tetapi Anda dapat memodifikasinya untuk elemen apa pun yang Anda butuhkan

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});

— jjhavokk
sumber

13

Gunakan kondisi ini:

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}

— Rana
sumber

11

Ada dua metode dalam jQuery untuk memeriksa visibilitas:

$("#selector").is(":visible")

dan

$("#selector").is(":hidden")

Anda juga dapat menjalankan perintah berdasarkan visibilitas di pemilih;

$("#selector:visible").hide()

atau

$("#selector:hidden").show()

— Luceos
sumber

6

Catatan: ini tidak akan mengembalikan atribut terlihat spesifik dari elemen yang dipilih, seperti pertanyaan, seperti :visiblejuga tergantung pada visibilitas leluhur orang tua. Jika nenek moyang adalah display: nonesemua keturunan tidak akan terlihat terlepas dari displaynegara.

— Hilang Coding

10

$('#selector').is(':visible');

— Barry Chapman
sumber

3

Catatan: ini tidak akan mengembalikan atribut terlihat spesifik dari elemen yang dipilih, seperti pertanyaan, seperti :visiblejuga tergantung pada visibilitas leluhur orang tua. Jika nenek moyang adalah display: nonesemua keturunan tidak akan terlihat terlepas dari displaynegara.

— Hilang Coding