Bagaimana cara memeriksa apakah suatu item disembunyikan di jQuery?

Anda dapat mengalihkan visibilitas item menggunakan .hide() , .show() atau .toggle() .

Bagaimana Anda menguji apakah suatu barang terlihat atau disembunyikan?

6967
07 окт. Philip Morton bertanya pada 7 Oktober. 2008-10-07 16:03 '08 pada 16:03 2008-10-07 16:03
@ 56 jawaban
  • 1
  • 2

Karena pertanyaan terkait dengan satu elemen, kode ini mungkin lebih sesuai:

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

Sama dengan proposal Twenty , tetapi diterapkan pada satu elemen; dan ini sesuai dengan algoritma yang direkomendasikan di FAQ jQuery

8594
07 окт. Jawabannya diberikan Tsvetomir Tsonev 07 Oktober. 2008-10-07 16:30 '08 pukul 4.30 sore 2008-10-07 16:30

Anda dapat menggunakan pemilih hidden :

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

Dan pemilih yang visible :

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. balasan diberikan twernt 07 Okt 2008-10-07 16:16 '08 pada 16:16 2008-10-07 16:16
 if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){ // element is hidden } 

Metode di atas tidak memperhitungkan visibilitas orang tua. Untuk melihat orang tua, Anda harus menggunakan .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 memperlakukan div2 terlihat, dan :visible tidak. Tetapi hal di atas dapat berguna dalam banyak kasus, terutama ketika Anda perlu mencari tahu apakah ada kesalahan div terlihat di elemen induk tersembunyi, karena dalam kondisi ini :visible tidak akan berfungsi.

831
07 окт. balasan diberikan kepada Mote 07 Okt. 2008-10-07 16:09 '08 pada 16:09 2008-10-07 16:09

Tidak satu pun dari jawaban ini menyangkut apa yang saya mengerti, dan ini adalah pertanyaan yang saya cari: "Bagaimana saya memproses elemen dengan visibility: hidden ?". Baik :visible , maupun :hidden tidak akan menangani ini, karena mereka berdua mencari pemetaan dalam dokumentasi. Sejauh yang saya tahu, tidak ada pemilih untuk menangani visibilitas CSS. Inilah cara saya mengatasinya (pemilih jQuery standar, mungkin sintaks yang lebih ringkas):

 $(".item").each(function() { if ($(this).css("visibility") == "hidden") { // handle non visible state } else { // handle visible state } }); 
474
24 марта '11 в 21:44 2011-03-24 21:44 jawabannya diberikan oleh aaronLile 24 Maret '11 di 21:44 2011-03-24 21:44

Dari Bagaimana menentukan status item yang diubah?


Anda dapat menentukan apakah suatu elemen dikompilasi atau tidak menggunakan pemilih yang :visible :hidden dan :hidden .

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

Jika Anda hanya bertindak berdasarkan elemen berdasarkan penampilannya, Anda dapat dengan mudah memasukkan :visible atau :hidden dalam ekspresi pemilih. Sebagai contoh:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. jawabannya diberikan oleh user574889 14 Jan 2011-01-14 00:13 '11 pada 0:13 2011-01-14 00:13

Seringkali, dengan memeriksa apakah sesuatu terlihat atau tidak, Anda akan >

Jadi, jika Anda memiliki pemilih, dan Anda ingin melakukan beberapa tindakan di atasnya, hanya jika itu terlihat atau disembunyikan, Anda dapat menggunakan filter(":visible") atau filter(":hidden") , dan kemudian ikat ke tindakan yang ingin Anda ambil.

Jadi, alih-alih if , misalnya:

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

Atau lebih efektif, tetapi bahkan lebih jelek:

 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" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 jawabannya diberikan Simon_Weaver 25 Juli, '09 pada 13:21 2009-07-25 13:21

Selector :visible menurut dokumentasi jQuery :

  • Mereka tidak memiliki display nilai CSS.
  • Ini adalah elemen bentuk dengan type="hidden" .
  • Lebar dan tinggi mereka jelas diatur ke 0.
  • Elemen induk disembunyikan, sehingga elemen tidak ditampilkan pada halaman.

Item dengan visibility: hidden atau opacity: 0 dianggap terlihat, karena masih mengkonsumsi ruang dalam tata letak.

Ini berguna dalam beberapa kasus dan tidak berguna untuk yang lain, karena jika Anda ingin memeriksa apakah suatu elemen terlihat ( display != none ), mengabaikan visibilitas elemen induk, Anda akan menemukan bahwa mengeksekusi .css("display") == 'none' Terjadi tidak hanya lebih cepat, tetapi juga mengembalikan kebenaran visibilitas.

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

Perhatikan juga catatan jQuery tambahan :

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

Juga, jika Anda khawatir tentang kinerja, Anda harus memeriksa sekarang Anda melihat saya ... tampilkan / sembunyikan kinerja (2010-05-04), dan gunakan metode lain untuk menampilkan dan menyembunyikan elemen.

206
25 нояб. Jawaban diberikan oleh Pedro Rainho pada 25 November. 2011-11-25 12:16 '11 pada 12:16 2011-11-25 12:16

Ini berfungsi untuk saya, dan saya menggunakan show() dan hide() untuk membuat div saya tersembunyi / terlihat:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 jawabannya diberikan oleh Abiy pada 06 Juli '11 di 23:19 2011-07-06 23:19

Bagaimana visibilitas elemen dan jQuery bekerja

Elemen dapat disembunyikan menggunakan display:none , visibility:hidden atau opacity:0 . Perbedaan antara metode ini:

  • display:none menyembunyikan item dan tidak menempati ruang apa pun;
  • visibility:hidden menyembunyikan item, tetapi masih membutuhkan ruang di tata letak;
  • opacity:0 menyembunyikan item sebagai "terlihat: tersembunyi", dan masih membutuhkan ruang dalam tata letak; satu-satunya perbedaan adalah bahwa opacity memungkinkan elemen menjadi sebagian transparan;

     if ($('.target').is(':hidden')) { $('.target').show(); } else { $('.target').hide(); } if ($('.target').is(':visible')) { $('.target').hide(); } else { $('.target').show(); } if ($('.target-visibility').css('visibility') == 'hidden') { $('.target-visibility').css({ visibility: "visible", display: "" }); } else { $('.target-visibility').css({ visibility: "hidden", display: "" }); } if ($('.target-visibility').css('opacity') == "0") { $('.target-visibility').css({ opacity: "1", display: "" }); } else { $('.target-visibility').css({ opacity: "0", display: "" }); } 

    Metode jQuery switch yang berguna:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. jawabannya diberikan oleh webvitaly 25 Apr 2012-04-25 00:04 '12 pada pukul 12:04 2012-04-25 00:04

Saya akan menggunakan kelas CSS. .hide { display: none!important; } .hide { display: none!important; } .

Untuk menyembunyikan / menampilkan, saya memanggil .addClass("hide")/.removeClass("hide") . Untuk memeriksa visibilitas, saya menggunakan .hasClass("hide") .

Ini adalah cara sederhana dan mudah untuk memeriksa / menyembunyikan / menampilkan item jika Anda tidak berencana untuk menggunakan metode .toggle() atau .animate() .

145
03 февр. jawaban yang diberikan oleh Evgeny Levin 03 Feb. 2012-02-03 19:04 '12 pada 19:04 2012-02-03 19:04

Anda juga dapat melakukan ini menggunakan javascript biasa:

 function isRendered(domObj) { if ((domObj.nodeType != 1) || (domObj == document.body)) { return true; } if (domObj.currentStyle  domObj.currentStyle["display"] != "none"  domObj.currentStyle["visibility"] != "hidden") { return isRendered(domObj.parentNode); } else if (window.getComputedStyle) { var cs = document.defaultView.getComputedStyle(domObj, null); if (cs.getPropertyValue("display") != "none"  cs.getPropertyValue("visibility") != "hidden") { return isRendered(domObj.parentNode); } } return false; } 

Catatan:

  • Bekerja di mana saja

  • Bekerja untuk item bersarang

  • Bekerja untuk CSS dan gaya inline.

  • Tidak diperlukan kerangka kerja

140
16 июля '12 в 22:18 2012-07-16 22:18 jawabannya diberikan oleh Matt Brock 16 Juli '12 pada 10:18 2012-07-16 22:18

Anda cukup menggunakan atribut yang hidden atau visible , misalnya:

 $('element:hidden') $('element:visible') 

Atau Anda dapat menyederhanakan hal yang sama dengan yang berikut ini.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 jawabannya diberikan ScoRpion 23 Mei '12 pukul 15:59 2012-05-23 15:59

Jawaban lain yang perlu Anda pertimbangkan: jika Anda menyembunyikan suatu elemen, Anda harus menggunakan jQuery , tetapi alih-alih menyembunyikannya, Anda menghapus keseluruhan elemen, tetapi Anda menyalin HTML -nya, dan tag itu sendiri ke dalam variabel jQuery, dan kemudian Yang perlu Anda lakukan adalah menguji apakah ada tag di layar, menggunakan panjang if (!$('#thetagname').length) .

110
22 апр. jawabannya diberikan oleh think123 22 Apr 2012-04-22 02:40 '12 pada 2:40 2012-04-22 02:40

Tautan demo

Sumber:

Blogger Plug n Play - Alat dan Widget jQuery: Cara mengetahui apakah suatu item disembunyikan atau terlihat menggunakan jQuery

105
25 янв. Jawabannya adalah Code Spy 25 Jan 2013-01-25 08:34 '13 pada 8:34 2013-01-25 08:34

ebdiv harus disetel ke style="display:none;" Ini berfungsi untuk menunjukkan dan menyembunyikan:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 jawabannya diberikan oleh Vaishu pada 13 Juni '12 pada pukul 4:20 sore 2012-06-13 16:20

Saat menguji elemen dengan pemilih :hidden di jQuery, harus diperhitungkan bahwa elemen dengan lokasi absolut dapat dikenali sebagai tersembunyi, meskipun elemen turunannya terlihat .

Pada awalnya, ini agak berlawanan dengan intuisi - walaupun melihat lebih dekat pada dokumentasi jQuery memberikan informasi yang relevan:

Elemen dapat dianggap tersembunyi karena beberapa alasan: [...] Lebar dan tinggi mereka jelas diatur ke 0. [...]

Jadi sangat masuk akal berkenaan dengan model kotak dan gaya terhitung untuk elemen. Bahkan jika lebar dan tinggi tidak diatur secara eksplisit ke 0, mereka dapat ditetapkan secara implisit.

Lihatlah contoh berikut:

 .foo { position: absolute; left: 10px; top: 10px; background: #ff0000; } .bar { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: #0000ff; } 
http://jsfiddle.net/pM2q3/7/ 

JS yang sama akan memiliki output ini:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 jawabannya diberikan conceptdeluxe 06 Mei '14 pukul 13:50 2014-05-06 13:50

Itu bisa bekerja:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 jawabannya diberikan oleh Maneesh Kumar 20 Juli, '12 pada 15:44 2012-07-20 15:44

Contoh:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="checkme" class="product" style="display:none"> <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish <br>Product: Salmon Atlantic <br>Specie: Salmo salar <br>Form: Steaks </div> 
62
28 окт. jawaban yang diberikan oleh Irfan DANISH 28 Okt 2013-10-28 09:43 '13 pada 9:43 2013-10-28 09:43

Untuk memeriksa apakah ini tidak terlihat, saya menggunakan ! :

 if ( !$('#book').is(':visible')) { alert('#book is not visible') } 

Atau yang berikut: sam, menjaga pemilih jQuery dalam variabel agar memiliki kinerja yang lebih baik ketika Anda membutuhkannya beberapa kali:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 jawabannya diberikan oleh Matthias Wegtun pada 04 Juni '13 di 4:42 2013-06-04 16:42

Gunakan peralihan kelas, bukan pengeditan gaya.,.

Menggunakan kelas yang dirancang untuk "menyembunyikan" elemen sederhana dan juga salah satu metode yang paling efektif. Mengganti kelas 'tersembunyi' dengan tipe Display 'tidak ada' akan lebih cepat daripada mengedit gaya ini secara >Rotasi dua elemen yang terlihat / tersembunyi di div yang sama .


Rekomendasi dan Optimasi JavaScript

Berikut adalah video yang benar-benar instruktif di Google Tech Talk dari chief engineer Google Nicholas Zakas:

59
19 июля '13 в 0:17 2013-07-19 00:17 jawabannya diberikan Lopsided 19 Juli '13 pada 0:17 2013-07-19 00:17

Contoh menggunakan cek yang terlihat untuk unit iklan:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ad-placement" id="ablockercheck"></div> <div id="ablockermsg" style="display: none"></div> 

"ablockercheck" adalah pengidentifikasi yang memblokir blok. Karenanya, dengan memeriksa ini, jika terlihat, Anda dapat mendeteksi apakah unit iklan diaktifkan.

55
27 апр. jawabannya diberikan Roman Losev 27 April. 2015-04-27 10:57 '15 pada 10:57 2015-04-27 10:57

Pada akhirnya, tidak ada contoh yang cocok untuk saya, jadi saya menulis sendiri.

Pengujian (tanpa filter:alpha dukungan Internet Explorer filter:alpha ):

a) Periksa apakah dokumen tersebut disembunyikan

b) Periksa apakah elemen memiliki lebar / tinggi / opacity nol atau display:none / visibility:hidden dalam gaya bawaan.

c) Pastikan bahwa tengah (juga karena lebih cepat daripada menguji setiap piksel / sudut) elemen tidak disembunyikan oleh elemen lain (dan semua leluhur, misalnya: overflow:hidden / gulir / satu elemen di atas enother) atau layar tepi

d) Periksa apakah elemen memiliki lebar / tinggi / opacity nol atau display:none / visibilitas: disembunyikan dalam gaya yang dihitung (di antara semua leluhur)

Diuji

Android 4.4 (browser sendiri / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Webkit Mac), Internet Explorer (mode Internet Explorer 5-11 + Internet Explorer 8 pada mesin virtual ), Safari (Windows / Mac / iOS)

 var is_visible = (function () { var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0, y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0, relative = !!((!x  !y) || !document.elementFromPoint(x, y)); function inside(child, parent) { while(child){ if (child === parent) return true; child = child.parentNode; } return false; }; return function (elem) { if ( document.hidden || elem.offsetWidth==0 || elem.offsetHeight==0 || elem.style.visibility=='hidden' || elem.style.display=='none' || elem.style.opacity===0 ) return false; var rect = elem.getBoundingClientRect(); if (relative) { if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false; } else if ( !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) || ( rect.top + elem.offsetHeight/2 < 0 || rect.left + elem.offsetWidth/2 < 0 || rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) || rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth) ) ) return false; if (window.getComputedStyle || elem.currentStyle) { var el = elem, comp = null; while (el) { if (el === document) {break;} else if(!el.parentNode) return false; comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle; if (comp  (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined'  comp.opacity != 1))) return false; el = el.parentNode; } } return true; } })(); 

Cara menggunakan:

 is_visible(elem) // boolean 
55
09 апр. jawabannya diberikan Aleko 09 April. 2014-04-09 20:06 '14 pada 20:06 2014-04-09 20:06

Anda perlu memeriksa keduanya ... Tampilan serta visibilitas:

 if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") { // The element is not visible } else { // The element is visible } 

Jika kami memeriksa $(this).is(":visible") , jQuery secara otomatis memeriksa kedua hal tersebut.

50
31 янв. jawabannya diberikan oleh Premshankar Tiwari pada tanggal 31 Januari 2014-01-31 09:24 '14 jam 9:24 2014-01-31 09:24

Mungkin Anda bisa melakukan hal seperti ini.

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. balasan yang diberikan oleh Mathias Stavrou 07 Apr 2015-04-07 15:26 '15 pada 15:26 2015-04-07 15:26

Karena Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (seperti yang dijelaskan untuk jQuery: visible selector ) - kita dapat memeriksa apakah elemen tersebut terlihat dengan cara ini:

 function isElementReallyHidden (el) { return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0; } var booElementReallyShowed = !isElementReallyHidden(someEl); $(someEl).parents().each(function () { if (isElementReallyHidden(this)) { booElementReallyShowed = false; } }); 
32
19 марта '14 в 15:42 2014-03-19 15:42 jawabannya diberikan oleh Andron 19 Maret, '14 pukul 15:42 2014-03-19 15:42
 if($('#postcode_div').is(':visible')) { if($('#postcode_text').val()=='') { $('#spanPost').text('\u00a0'); } else { $('#spanPost').text($('#postcode_text').val()); } 
30
15 нояб. jawabannya diberikan oleh Gaurav pada 15 nov. 2013-11-15 13:41 '13 pada 13:41 2013-11-15 13:41

Tetapi bagaimana jika elemen CSS terlihat seperti ini?

 .element{ position: absolute;left:-9999; } 

Jadi ini adalah jawaban untuk pertanyaan stack overflow. Bagaimana cara mengecek apakah suatu item mati layar juga harus dipertimbangkan.

30
23 авг. jawabannya diberikan oleh RN Kushwaha 23 Agustus. 2014-08-23 23:53 '14 pada 23:53 2014-08-23 23:53

Cukup periksa visibilitas dengan memeriksa nilai logis, misalnya:

 if (this.hidden === false) { // Your code } 

Saya menggunakan kode ini untuk setiap fungsi. Jika tidak, Anda dapat menggunakan is(':visible') untuk memeriksa visibilitas elemen.

30
11 авг. jawabannya diberikan pixellabme 11 agustus . 2014-08-11 08:28 '14 pada 8:28 2014-08-11 08:28

Sebuah fungsi dapat dibuat untuk memeriksa atribut visibilitas / tampilan untuk menentukan apakah suatu elemen ditampilkan di antarmuka pengguna atau tidak.

 function checkUIElementVisible(element) { return ((element.css('display') !== 'none')  (element.css('visibility') !== 'hidden')); } 

Naskah bekerja

29
29 авг. jawabannya diberikan V31 29 Agustus. 2014-08-29 23:20 '14 pada 23:20 2014-08-29 23:20

Ada juga ekspresi kondisional ternary untuk memeriksa keadaan elemen, dan kemudian mengubahnya:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. balasan yang diberikan oleh cssimsek 06 Nov. 2013-11-06 02:32 '13 pada 2:32 2013-11-06 02:32
  • 1
  • 2

Pertanyaan lain tentang label label atau Ajukan pertanyaan