Pertanyaan Bagaimana cara memeriksa apakah suatu elemen disembunyikan di jQuery?


Dimungkinkan untuk mengubah visibilitas elemen, menggunakan fungsi-fungsi .hide(), .show() atau .toggle().

Bagaimana Anda akan menguji apakah suatu elemen terlihat atau tersembunyi?


6694
2017-10-07 13:03


asal


Jawaban:


Karena pertanyaan mengacu pada elemen tunggal, kode ini mungkin lebih cocok:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

Sama dengan saran twernt, tetapi diterapkan pada elemen tunggal; dan itu cocok dengan algoritma yang direkomendasikan dalam jQuery FAQ


8283
2017-10-07 13:30



Anda dapat menggunakan hidden pemilih:

// Matches all elements that are hidden
$('element:hidden')

Dan itu visible pemilih:

// Matches all elements that are visible
$('element:visible')

1261
2017-10-07 13:16



if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Metode di atas tidak mempertimbangkan visibilitas orang tua. Untuk mempertimbangkan orang tua juga, Anda harus menggunakannya .is(":hidden") atau .is(":visible").

Sebagai contoh,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

Metode di atas akan dipertimbangkan div2 terlihat sementara :visible tidak. Tetapi hal di atas mungkin berguna dalam banyak kasus, terutama ketika Anda perlu menemukan apakah ada div kesalahan yang terlihat pada orang tua yang disembunyikan karena dalam kondisi seperti itu :visible Tidak akan berhasil.


783
2017-10-07 13:09



Tak satu pun dari jawaban ini yang menjawab apa yang saya pahami sebagai pertanyaan, yang saya cari, "Bagaimana saya menangani barang yang ada visibility: hidden? ". Bukan keduanya :visible maupun :hidden akan menangani ini, karena keduanya mencari tampilan per dokumentasi. Sejauh yang saya bisa tentukan, tidak ada pemilih untuk menangani visibilitas CSS. Di sini adalah bagaimana saya mengatasinya (standar pemilih jQuery, mungkin ada sintaks yang lebih kental):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

450
2018-03-24 18:44



Dari Bagaimana cara saya menentukan status elemen yang diubah?


Anda dapat menentukan apakah suatu elemen diciutkan atau tidak dengan menggunakan :visible dan :hidden penyeleksi.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Jika Anda hanya bertindak pada elemen berdasarkan visibilitasnya, Anda bisa memasukkannya :visible atau :hidden dalam ekspresi pemilih. Sebagai contoh:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

321
2018-01-13 21:13



Seringkali ketika memeriksa apakah sesuatu terlihat atau tidak, Anda akan langsung segera dan melakukan sesuatu yang lain dengannya. jQuery chaining membuat ini mudah.

Jadi jika Anda memiliki pemilih dan Anda ingin melakukan beberapa tindakan hanya jika terlihat atau disembunyikan, Anda dapat menggunakannya filter(":visible") atau filter(":hidden") diikuti dengan merantainya dengan tindakan yang ingin Anda ambil.

Jadi, bukannya sebuah if pernyataan, seperti ini:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

Atau lebih efisien, tetapi bahkan lebih buruk:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Anda dapat melakukan semuanya dalam satu baris:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

235
2017-07-25 10:21



Itu :visible pemilih menurut dokumentasi jQuery:

  • Mereka memiliki CSS display Nilai dari none.
  • Mereka adalah elemen bentuk dengan type="hidden".
  • Lebar dan tinggi mereka secara eksplisit diatur ke 0.
  • Unsur leluhur tersembunyi, sehingga elemen tidak ditampilkan di halaman.

Elemen dengan visibility: hidden atau opacity: 0 dianggap terlihat, karena mereka masih mengkonsumsi ruang di tata letak.

Ini berguna dalam beberapa kasus dan tidak berguna pada orang lain, karena jika Anda ingin memeriksa apakah elemen terlihat (display != none), mengabaikan pandangan orang tua, Anda akan menemukan hal itu .css("display") == 'none' tidak hanya lebih cepat, tetapi juga akan mengembalikan pemeriksaan visibilitas dengan benar.

Jika Anda ingin memeriksa visibilitas daripada tampilan, Anda harus menggunakan: .css("visibility") == "hidden".

Juga pertimbangkan catatan jQuery tambahan:

Karena :visible adalah ekstensi jQuery dan bukan bagian dari spesifikasi CSS, menggunakan query :visible tidak dapat memanfaatkan peningkatan kinerja yang disediakan oleh DOM asli querySelectorAll() metode. Untuk mencapai kinerja terbaik saat menggunakan :visible untuk memilih elemen, pertama pilih elemen menggunakan pemilih CSS murni, lalu gunakan .filter(":visible").

Juga, jika Anda khawatir tentang kinerja, Anda harus memeriksanya Sekarang Anda melihat saya ... pertunjukan pertunjukan / sembunyikan (2010-05-04). Dan gunakan metode lain untuk menampilkan dan menyembunyikan elemen.


187
2017-11-25 09:16



Ini bekerja untuk saya, dan saya gunakan show() dan hide() untuk membuat div saya tersembunyi / terlihat:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

169
2017-07-06 20:19