Bagaimana cara saya memeriksa apakah suatu elemen tersembunyi di jQuery?

Apakah mungkin untuk mengaktifkan visibilitas elemen, menggunakan fungsi .hide(), .show()atau .toggle()?

Bagaimana Anda menguji apakah suatu elemen adalah visibleatau hidden?

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

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

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

Ini sama dengan saran twernt , tetapi diterapkan pada elemen tunggal; dan itu cocok dengan algoritma yang direkomendasikan di FAQ jQuery .

Kami menggunakan jQuery's is () untuk memeriksa elemen yang dipilih dengan elemen lain, pemilih atau objek jQuery apa pun. Metode ini melintasi sepanjang elemen DOM untuk menemukan kecocokan, yang memenuhi parameter yang diteruskan. Ini akan mengembalikan true jika ada kecocokan, jika tidak return salah.

Anda dapat menggunakan hiddenpemilih:

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

Dan visiblepemilih:

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

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 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 dianggap div2terlihat sementara :visibletidak. Tetapi hal di atas mungkin berguna dalam banyak kasus, terutama ketika Anda perlu mencari jika ada kesalahan div yang terlihat di induk tersembunyi karena dalam kondisi seperti :visibleitu tidak akan berfungsi.

Tidak satu pun dari jawaban ini yang menjawab apa yang saya pahami sebagai pertanyaan, yang merupakan apa yang saya cari, "Bagaimana saya menangani barang yang dimiliki visibility: hidden?" . Tidak :visiblejuga tidak :hiddenakan menangani ini, karena keduanya mencari tampilan per dokumentasi. Sejauh yang saya bisa menentukan, tidak ada pemilih untuk menangani visibilitas CSS. Inilah cara saya mengatasinya (pemilih jQuery standar, mungkin ada sintaks yang lebih kental):

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

Dari Bagaimana cara saya menentukan keadaan elemen toggled?

Anda dapat menentukan apakah suatu elemen diciutkan atau tidak dengan menggunakan :visibledan :hiddenpenyeleksi.

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

Jika Anda hanya bertindak berdasarkan elemen berdasarkan visibilitasnya, Anda bisa memasukkan :visibleatau :hiddendalam ekspresi pemilih. Sebagai contoh:

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

Seringkali ketika memeriksa apakah sesuatu terlihat atau tidak, Anda akan langsung pergi dan melakukan sesuatu yang lain dengannya. Chaining jQuery memudahkan ini.

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

Jadi alih-alih ifpernyataan, seperti ini:

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

Atau lebih efisien, 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" });

The :visiblepemilih menurut dokumentasi jQuery :

• Mereka memiliki displaynilai CSSnone .
• Mereka adalah elemen bentuk dengan type="hidden" .
• Lebar dan tinggi mereka secara eksplisit diatur ke 0.
• Elemen leluhur disembunyikan, sehingga elemen tidak ditampilkan di halaman.

Elemen dengan visibility: hiddenatau opacity: 0dianggap terlihat, karena masih mengkonsumsi ruang dalam tata letak.

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

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

Juga pertimbangkan catatan jQuery tambahan :

Karena :visiblemerupakan ekstensi jQuery dan bukan bagian dari spesifikasi CSS, permintaan menggunakan :visibletidak dapat mengambil keuntungan dari peningkatan kinerja yang disediakan oleh querySelectorAll()metode DOM asli . Untuk mencapai kinerja terbaik saat menggunakan :visibleuntuk memilih elemen, pertama pilih elemen menggunakan pemilih CSS murni, lalu 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 menunjukkan dan menyembunyikan elemen.

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

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

Cara visibilitas elemen dan jQuery bekerja ;

Suatu elemen dapat disembunyikan dengan display:none, visibility:hiddenatau opacity:0. Perbedaan antara metode-metode tersebut:

• display:none menyembunyikan elemen, dan tidak memakan ruang apa pun;
• visibility:hidden menyembunyikan elemen, tetapi masih membutuhkan ruang di tata letak;

• opacity:0menyembunyikan elemen sebagai "visibility: hidden", dan masih membutuhkan ruang dalam tata letak; satu-satunya perbedaan adalah bahwa opacity memungkinkan seseorang untuk membuat elemen 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 beralih jQuery yang berguna:

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });

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:

1. Bekerja di mana saja

2. Bekerja untuk elemen bersarang

3. Bekerja untuk CSS dan gaya inline

4. Tidak membutuhkan kerangka kerja

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

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

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

Demo Link

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Sumber:

Blogger Plug n Play - Alat dan Widget jQuery: Cara Melihat apakah Elemen disembunyikan atau Terlihat Menggunakan jQuery

Seseorang dapat menggunakan atribut hiddenatau visible, seperti:

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

Atau Anda dapat menyederhanakan sama dengan yaitu sebagai berikut.

$(element).is(":visible")

ebdivharus diatur ke style="display:none;". Ini berfungsi untuk menampilkan dan menyembunyikan:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

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

Saat menguji elemen terhadap :hiddenpemilih di jQuery, harus dipertimbangkan bahwa elemen yang diposisikan absolut dapat dikenali sebagai disembunyikan meskipun elemen turunannya terlihat .

Ini tampaknya agak kontra-intuitif pada awalnya - meskipun melihat lebih dekat pada dokumentasi jQuery memberikan informasi yang relevan:

Elemen dapat dianggap tersembunyi karena beberapa alasan: [...] Lebar dan tinggi mereka secara eksplisit ditetapkan ke 0. [...]

Jadi ini sebenarnya masuk akal dalam hal model kotak dan gaya yang dihitung untuk elemen. Bahkan jika lebar dan tinggi tidak diatur secara eksplisit ke 0, mereka dapat ditetapkan secara implisit .

Lihat contoh berikut:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false

.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

Pembaruan untuk jQuery 3.x:

Dengan jQuery 3 perilaku yang dijelaskan akan berubah! Elemen akan dianggap terlihat jika mereka memiliki kotak tata letak, termasuk yang memiliki lebar nol dan / atau tinggi.

JSFiddle dengan jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Kode JavaScript yang sama kemudian akan memiliki output ini:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

Ini mungkin berhasil:

expect($("#message_div").css("display")).toBe("none");

Contoh:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});

<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>

Untuk memeriksa apakah itu tidak terlihat saya gunakan !:

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

Atau yang berikut ini juga sam, menyimpan pemilih jQuery dalam variabel untuk memiliki kinerja yang lebih baik ketika Anda membutuhkannya beberapa kali:

var $book = $('#book')

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

Gunakan toggling kelas, bukan pengeditan gaya. . .

Menggunakan kelas yang ditujukan untuk elemen "persembunyian" itu mudah dan juga salah satu metode yang paling efisien. Beralih kelas 'tersembunyi' dengan Displaygaya 'tidak ada' akan melakukan lebih cepat daripada mengedit gaya itu secara langsung. Saya menjelaskan beberapa dari pertanyaan Stack Overflow ini. Mengubah dua elemen terlihat / tersembunyi di div yang sama .

Praktik Terbaik dan Optimasi JavaScript

Berikut adalah video Google Tech Talk yang benar-benar mencerahkan oleh insinyur front-end Google Nicholas Zakas:

• Percepat Javascript Anda (YouTube)

Contoh penggunaan cek yang terlihat untuk adblocker diaktifkan:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});

<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 ID yang blok adblocker. Jadi, periksa apakah terlihat Anda dapat mendeteksi apakah adblocker dihidupkan.

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

Tes (tidak ada dukungan Internet Explorer filter:alpha):

a) Periksa apakah dokumen tidak disembunyikan

b) Periksa apakah suatu elemen memiliki lebar nol / tinggi / opacity atau display:none/ visibility:hiddendalam gaya inline

c) Periksa apakah pusat (juga karena lebih cepat daripada menguji setiap piksel / sudut) elemen tidak disembunyikan oleh elemen lain (dan semua leluhur, contoh: overflow:hidden/ gulir / satu elemen di atas yang lain) atau tepi layar

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

Diuji pada

Android 4.4 (Browser asli / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 mode dokumen + Internet Explorer 8 pada mesin virtual), dan 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 Penggunaan:

is_visible(elem) // boolean

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 memeriksa kedua hal secara otomatis.

Mungkin Anda bisa melakukan hal seperti ini

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

Cukup periksa visibilitas dengan memeriksa nilai boolean, seperti:

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

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

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 benar - benar 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;
    }
});

Tetapi bagaimana jika elemen CSS seperti berikut ini?

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

Jadi jawaban ini untuk pertanyaan Stack Overflow. Bagaimana memeriksa apakah suatu elemen di luar layar juga harus dipertimbangkan.

Fungsi dapat dibuat untuk memeriksa atribut visibilitas / tampilan untuk mengukur apakah elemen ditampilkan di UI atau tidak.

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

Biola yang Bekerja

Juga inilah ekspresi kondisional ternary untuk memeriksa keadaan elemen dan kemudian beralih:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}