Bir öğenin jQuery'de gizli olup olmadığını nasıl kontrol edebilirim?

O, bir elementin görünürlüğünü değiştirmek işlevlerini kullanarak mümkün mü .hide(), .show()yoksa .toggle()?

Bir eleman olup olmadığını nasıl test olacağını visibleya hidden?

Soru tek bir öğeye atıfta bulunduğundan, bu kod daha uygun olabilir:

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

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

Twistin önerisi ile aynıdır , ancak tek bir elemana uygulanır; ve jQuery SSS bölümünde önerilen algoritma ile eşleşir .

Seçilen öğeyi başka bir öğe, seçici veya herhangi bir jQuery nesnesiyle kontrol etmek için jQuery's (() öğesini kullanırız. Bu yöntem, iletilen parametreyi karşılayan bir eşleşme bulmak için DOM öğeleri boyunca dolaşır. Bir eşleşme varsa true, aksi halde false döndürür.

hiddenSeçiciyi kullanabilirsiniz :

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

Ve visibleseçici:

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

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

Yukarıdaki yöntem, ebeveynin görünürlüğünü dikkate almaz. Ebeveyni de dikkate almak için .is(":hidden")veya seçeneğini kullanmalısınız .is(":visible").

Örneğin,

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

Yukarıdaki yöntem div2görünür :visibleolmasa da görünür olarak değerlendirilecektir . Ancak, yukarıdaki gibi birçok durumda yararlı olabilir, özellikle gizli ebeveynte görünür herhangi bir hata div olup olmadığını bulmanız gerektiğinde, bu gibi durumlarda :visibleçalışmaz.

Bu cevapların hiçbiri, soru olarak anladığım şeyi, yani aradığım şey olan "Sahip olan öğeleri nasıl ele alırım visibility: hidden?" . Her ikisi :visiblede :hiddenbelgelere göre ekran aradığı için bunu da ele almayacaktır. Belirleyebildiğim kadarıyla, CSS görünürlüğünü idare edecek bir seçici yok. İşte nasıl çözdüm (standart jQuery seçiciler, daha yoğun bir sözdizimi olabilir):

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

Gönderen nasıl toggled elemanın durumunu belirliyorsunuz?

:visibleVe :hiddenseçicilerini kullanarak bir öğenin daraltılıp dağıtılmadığını belirleyebilirsiniz.

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

Görünürlüğüne göre bir öğeye göre hareket ediyorsanız, yalnızca seçici ifadeye :visibleveya :hiddenseçici ifadesine dahil edebilirsiniz . Örneğin:

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

Genellikle bir şeyin görünür olup olmadığını kontrol ederken, hemen ileri gidecek ve onunla başka bir şey yapacaksınız. jQuery zincirleme bunu kolaylaştırır.

Dolayısıyla, bir seçiciniz varsa ve üzerinde yalnızca görünür veya gizli olduğunda bir işlem yapmak istiyorsanız, bunu yapmak istediğiniz eylemle zincirleyerek kullanabilir filter(":visible")veya filter(":hidden")takip edebilirsiniz .

Yani bir ififade yerine, şöyle:

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

Veya daha verimli, ancak daha çirkin:

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

Hepsini tek bir satırda yapabilirsiniz:

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

:visibleUygun seçici jQuery belgeler :

• CSS displaydeğeri vardır none.
• Bunlar form elementleridir type="hidden".
• Genişlikleri ve yükseklikleri açıkça 0'a ayarlanmıştır.
• Bir üst öğe gizlendiğinden öğe sayfada gösterilmiyor.

Düzeni olan visibility: hiddenveya opacity: 0tüketen öğeler olduğu kabul edilir, çünkü düzende yer kaplarlar.

Bu, bazı durumlarda yararlı ve diğerlerinde işe yaramaz, çünkü öğenin görünür olup olmadığını kontrol etmek istiyorsanız ( display != none), ebeveynlerin görünürlüğünü göz ardı ederek, yapmanın .css("display") == 'none'sadece daha hızlı olmadığını, aynı zamanda görünürlük kontrolünü doğru bir şekilde döndüreceğini göreceksiniz.

Yerine ekranın görünürlüğünü kontrol etmek isterseniz, kullanmak gerekir: .css("visibility") == "hidden".

Ek jQuery notlarını da dikkate alın :

Çünkü :visiblebir jQuery eklentisi olup CSS şartname parçasıdır kullanarak sorguları :visibleyerli DOM tarafından sağlanan performans artışı yararlanmak edemez querySelectorAll()yöntemle. :visibleEleman seçerken kullanırken en iyi performansı elde etmek için , önce saf CSS seçiciyi kullanarak elemanları seçin, ardından kullanın .filter(":visible").

Ayrıca, performans konusunda endişeleriniz varsa, Şimdi beni görüyorsunuz… performansı göster / gizle (2010-05-04) seçeneğini işaretlemelisiniz. Ve öğeleri göstermek ve gizlemek için diğer yöntemleri kullanın.

Bu benim için çalışıyor ve ben div kullanarak / görünür yapmak için show()ve kullanıyorum hide():

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

Eleman görünürlüğü ve jQuery nasıl çalışır ;

Bir element ile gizlenmiş olabilir display:none, visibility:hiddenya da opacity:0. Bu yöntemler arasındaki fark:

• display:none öğeyi gizler ve yer kaplamaz;
• visibility:hidden öğeyi gizler, ancak düzende hala yer kaplar;

• opacity:0öğeyi "görünürlük: gizli" olarak gizler ve düzende hala yer kaplar; tek fark, opaklığın kişinin bir elemanı kısmen saydam yapmasına izin vermesidir;

  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: ""
    });
  }

  Yararlı jQuery geçiş yöntemleri:

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

Bunu düz JavaScript kullanarak da yapabilirsiniz:

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

Notlar:

1. Her yerde çalışır

2. İç içe elemanlar için çalışır

3. CSS ve satır içi stiller için çalışır

4. Çerçeve gerektirmez

CSS sınıfını kullanırdım .hide { display: none!important; }.

Saklanmak / göstermek için ararım .addClass("hide")/.removeClass("hide"). Görünürlüğü kontrol etmek için kullanıyorum .hasClass("hide").

Kullanmayı .toggle()veya .animate()yöntemi kullanmayı planlamıyorsanız, öğeleri kontrol etmenin / gizlemenin / göstermenin basit ve açık bir yoludur .

Demo Bağlantısı

$('#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"/>

Kaynak:

Blogger Tak ve Kullan - jQuery Araçlar ve Widget'lar: jQuery Kullanılarak Öğe'nin gizli veya Görünür Olup Olmadığı Nasıl Görünür?

Kişi, hiddenveya visibleözniteliğini aşağıdaki gibi kullanabilir:

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

Yoksa aynı kolaylaştırabilirsiniz DİR şöyle.

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

ebdivolarak ayarlanmalıdır style="display:none;". Hem göster hem de gizle için çalışır:

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

Dikkate almanız gereken başka bir yanıt, bir öğeyi gizliyorsanız, jQuery kullanmanız gerekir , ancak aslında gizlemek yerine, tüm öğeyi kaldırırsınız, ancak HTML içeriğini ve etiketinin kendisini bir jQuery değişkenine kopyalarsınız ve sonra Yapmanız gereken tek şey normal olanı kullanarak ekranda böyle bir etiket olup olmadığını test etmektir if (!$('#thetagname').length).

Bir öğeyi jQuery'de :hiddenseçiciye karşı test ederken , mutlak konumlandırılmış bir öğenin alt öğeleri görünür olmasına rağmen gizli olarak tanınabileceği düşünülmelidir .

Bu, ilk etapta biraz sezgisel görünüyor - jQuery belgelerine daha yakından bakmak, ilgili bilgileri veriyor:

Öğeler çeşitli nedenlerle gizli olarak kabul edilebilir: [...] Genişlikleri ve yükseklikleri açıkça 0 olarak ayarlanmıştır. [...]

Bu aslında kutu modeli ve elemanın hesaplanan stili açısından anlamlıdır. Genişlik ve yükseklik açıkça 0 olarak ayarlanmamış olsa bile, örtük olarak ayarlanabilir .

Aşağıdaki örneğe bir göz atın:

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>

JQuery 3.x için güncelleme:

JQuery 3 ile açıklanan davranış değişecektir! Öğelerin, sıfır genişlik ve / veya yükseklik dahil olmak üzere herhangi bir düzen kutusu varsa görünür olduğu kabul edilecektir.

JQuery 3.0.0-alpha1 ile JSFiddle:

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

Aynı JavaScript kodunun çıktısı şu olur:

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

Bu işe yarayabilir:

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

Misal:

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

Görünür olup olmadığını kontrol etmek için şunu kullanıyorum !:

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

Veya aşağıdakiler de sam'dir, jQuery seçiciyi birden çok kez ihtiyacınız olduğunda daha iyi performans elde etmek için bir değişkene kaydeder:

var $book = $('#book')

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

Stil düzenlemeyi değil, sınıf değiştirme özelliğini kullanın. . .

Elemanları "gizlemek" için belirlenmiş sınıfları kullanmak kolaydır ve aynı zamanda en verimli yöntemlerden biridir. 'Gizli' sınıfı ' Displayhiçbiri' stiliyle değiştirmek, o stili doğrudan düzenlemekten daha hızlı gerçekleşir. Yığın Taşması sorusundaki bu konuların bazılarını aynı div'da görünür / gizli iki öğeyi döndürerek açıkladım .

JavaScript En İyi Uygulamaları ve Optimizasyonu

İşte Google ön uç mühendisi Nicholas Zakas'ın bir Google Tech Talk'un gerçekten aydınlatıcı bir videosu:

• Javascript'inizi Hızlandırın (YouTube)

Reklam engelleyici için görünür denetimin kullanılmasına örnek :

$(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", reklam engelleyiciyi engelleyen bir kimliktir. Dolayısıyla, görünür olup olmadığını kontrol ederek reklam engelleyicinin Açık olup olmadığını tespit edebilirsiniz.

Sonuçta, hiçbir örnek bana uygun değil, bu yüzden kendim yazdım.

Testler (Internet Explorer desteği yok filter:alpha):

a) Belgenin gizli olup olmadığını kontrol edin

b) Bir elemanın sıfır genişlik / yükseklik / opaklık veya display:none/ visibility:hiddensatır içi stilleri olup olmadığını kontrol edin

c) Öğenin merkezinin (her piksel / köşeyi test etmekten daha hızlı olduğu için) başka bir öğe (ve tüm atalar, örneğin: overflow:hidden/ scroll / bir öğeyi diğerinin üzerinde) tarafından gizlenip gizlenmediğini kontrol edin

d) Bir elemanın sıfır genişlik / yükseklik / opaklık veya display:nonegörünürlük olup olmadığını kontrol edin : hesaplanan stillere gizlenmiş (tüm atalar arasında)

Üzerinde test edildi

Android 4.4 (Yerel tarayıcı / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (Internet Explorer 5-11 belge modları + Internet Explorer 8 sanal makine) ve 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;
    }
})();

Nasıl kullanılır:

is_visible(elem) // boolean

Her ikisini de kontrol etmeniz gerekir ... Görünürlüğün yanı sıra ekran:

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

Kontrol edersek $(this).is(":visible"), jQuery her iki şeyi de otomatik olarak kontrol eder.

Belki böyle bir şey yapabilirsiniz

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

Yalnızca aşağıdaki gibi bir boole değeri kontrol ederek görünürlüğü kontrol edin:

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

Bu kodu her işlev için kullandım. Aksi takdirde is(':visible'), bir öğenin görünürlüğünü kontrol etmek için kullanabilirsiniz .

Çünkü Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout( jQuery: visible Selector için açıklandığı gibi ) - öğenin gerçekten bu şekilde görünür olup olmadığını kontrol edebiliriz :

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

Ancak, öğenin CSS'si aşağıdaki gibi olursa ne olur?

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

Bu nedenle Yığın Taşması sorusuna verilen cevap Bir öğenin ekran dışında olup olmadığı nasıl kontrol edilir.

Öğenin kullanıcı arayüzünde gösterilip gösterilmediğini ölçmek için görünürlük / görüntüleme niteliklerini kontrol etmek amacıyla bir işlev oluşturulabilir.

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

Çalışma keman

Ayrıca, öğenin durumunu kontrol etmek ve daha sonra değiştirmek için üçlü bir koşullu ifade:

$('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());
}