JQuery kullanarak bir öğenin 'display: none' olup olmadığını kontrol edin veya tıklama ile engelleyin

239

Gizli öğeleri kontrol etmek ve sıralamak istiyorum. Nitelik displayve değere sahip tüm öğeleri bulmak mümkün müdür none?

jquery css

— Nicholas Francis
kaynak

542

Sen kullanabilirsiniz : görünür görünür unsurları ve için : gizlenmiş gizli unsurları öğrenmek için. Bu gizli öğelerin displayözelliği ayarlanmış none.

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

Belirli bir elemanı kontrol etmek için.

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

}

Öğeler belgedeki alanı tüketirlerse görünür kabul edilir. Görünür öğeler sıfırdan büyük bir genişliğe veya yüksekliğe sahiptir, Referans

Ayrıca () ile kullanabilirsiniz:visible

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

}

Ekranın değerini kontrol etmek istiyorsanız css () öğesini kullanabilirsiniz.

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

}

Ekran kullanıyorsanız aşağıdaki değerlere sahip displayolabilirsiniz.

görüntü yok

ekran: satır içi

Ekran bloğu

display: list-item

display: inline-block

Olası displaydeğerlerin tam listesini burada kontrol edin .

Display özelliğini JavaScript ile kontrol etmek için

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

— Adil
kaynak

benim senaryomda, her elemanın bir kimliği var, bu yüzden hile benim için çalışıyor :)

— Nicholas Francis

2

@NicholasFrancis, gizli tüm öğeleri bulmak için cevabımı güncelledim.

— Adil

Ayrıca satır içi css kontrol eder. Ben display: block;jquery gelen satır içi yazılı css var . Ben senin yöntemi ile kontrol edemiyorum. bana yardım et.

— Gaurav Manral

JQuery ekleniyor ve DOM'a eklendikten sonra öğeye erişiyor musunuz? Bana kodu gösterebilir misin? Jsfiddle.net'te

— Adil

JavaScript eşdeğeri nedir?

— TheBlackBenzKid

56

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

— Deepanshu Goyal
kaynak

7

+1: Bu, aslında bir üst öğe olsa bile çalışacağından, sorulan soru için kabul edilen cevaptan daha yararlıdır style="display: none;". Cevapları kullanarak :visibleve :hiddenbu seçiciler sayfasında genel görünürlük iade olarak belirli eleman görünürlük istiyorsanız başarısız olur ve bir ana öğe gizlenir (ki soru sordu değildi).

— Gitti Kodlama

Bu, JS DOM ortamında birleşik test çalıştırırken çalışır.

— b01

Bir sekme eklentisi için, visibility: 'hidden';css olarak ayarlanmıştı , bu yüzden kontrol de kontrol edildi:$(this).css('visibility') != 'hidden'

— phyatt

30

Evet, cssfunction işlevini kullanabilirsiniz. Aşağıda tüm div'ler aranacak, ancak ihtiyacınız olan öğeler için değiştirebilirsiniz

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

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

— jjhavokk
kaynak

13

Bu koşulu kullanın:

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

— Rana
kaynak

11

JQuery'de görünürlüğü kontrol etmek için iki yöntem vardır:

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

ve

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

Seçicideki görünürlüğe dayalı komutları da yürütebilirsiniz;

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

veya

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

— Luceos
kaynak

6

Not: Bu olacak değil soru sorar gibi, seçilen elemanların belirli görünür nitelik döndürmek :visibleda ebeveyn atası görünürlüğü bağlıdır. Eğer bir ata display: nonetüm torunları ise displaydurum ne olursa olsun görünmez .

— Gitti Kodlama

10

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

— Barry Chapman
kaynak

3

Not: Bu olacak değil soru sorar gibi, seçilen elemanların belirli görünür nitelik döndürmek :visibleda ebeveyn atası görünürlüğü bağlıdır. Eğer bir ata display: nonetüm torunları ise displaydurum ne olursa olsun görünmez .

— Gitti Kodlama