जाँचें, jQuery का उपयोग करके, यदि कोई तत्व 'डिस्प्ले: कोई नहीं' है या क्लिक पर ब्लॉक करें

239

मैं उन तत्वों को जांचना और सॉर्ट करना चाहता हूं जो छिपे हुए हैं। क्या विशेषता displayऔर मूल्य वाले सभी तत्वों को ढूंढना संभव है none?

jquery css

— निकोलस फ्रांसिस
स्रोत

542

आप उपयोग कर सकते हैं : दृश्य तत्वों के लिए दृश्यमान और : छिपे हुए तत्वों का पता लगाने के लिए। इस छिपे हुए तत्वों की displayविशेषता है none।

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

विशेष तत्व की जांच करने के लिए।

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

}

यदि वे दस्तावेज़ में स्थान का उपभोग करते हैं तो तत्व दिखाई देते हैं। दृश्यमान तत्वों की चौड़ाई या ऊँचाई शून्य से अधिक होती है, संदर्भ

आप () के साथ भी उपयोग कर सकते हैं:visible

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

}

यदि आप प्रदर्शन का मूल्य जांचना चाहते हैं तो आप css () का उपयोग कर सकते हैं

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

}

यदि आप डिस्प्ले का उपयोग कर रहे हैं तो निम्न मान displayहो सकते हैं।

कुछ भी डिस्प्ले मत करो

प्रदर्शन: इनलाइन

प्रदर्शन क्षेत्र

प्रदर्शन: सूची-आइटम

प्रदर्शन: इनलाइन-ब्लॉक

संभावित displayमूल्यों की पूरी सूची यहां देखें ।

जावास्क्रिप्ट के साथ प्रदर्शन संपत्ति की जांच करने के लिए

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

— आदिल
स्रोत

ठीक है, मेरे परिदृश्य में, प्रत्येक तत्व के पास एक आईडी है, इसलिए चाल मेरे लिए काम करती है :)

— निकोलस फ्रांसिस

2

@ निचलोलफ्रैंसिस, मैंने उन सभी तत्वों का पता लगाने के लिए अपने उत्तर को अपडेट किया है जो छिपे हुए हैं।

— आदिल

क्या यह इनलाइन css को भी चेक करता है। मेरे पास display: block;jquery से आने वाली css लिखित इनलाइन है। मैं इसे आपकी विधि से जांचने में असमर्थ हूं। मेरी मदद करो।

— गौरव मनराल

क्या jQuery को जोड़ा गया है और DOM में जोड़े जाने के बाद आप एलिमेंट एक्सेस कर रहे हैं? क्या आप मुझे कोड दिखा सकते हैं? Jsfiddle.net

— आदिल

जावास्क्रिप्ट समीकरण क्या है?

— TheBlackBenzKid

56

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

— दीपांशु गोयल
स्रोत

7

+1: यह वास्तव में पूछे गए प्रश्न के लिए स्वीकृत उत्तर की तुलना में अधिक उपयोगी है , क्योंकि यह तब भी काम करेगा जब कोई मूल तत्व हो style="display: none;"। यदि आप विशिष्ट तत्व दृश्यता चाहते हैं, तो उत्तर का उपयोग करना :visibleऔर :hiddenविफल हो जाएगा और एक मूल तत्व छिपा हुआ है क्योंकि चयनकर्ता पृष्ठ पर समग्र दृश्यता लौटाते हैं (जो प्रश्न नहीं पूछा गया था)।

— कोडिंग

जेएस डोम पर्यावरण में एकजुट परीक्षण चलाने पर यह काम करता है।

— b01

टैबिंग प्लगइन के लिए, यह visibility: 'hidden';css में सेट हो रहा था , इसलिए चेक भी समाप्त हो गया:$(this).css('visibility') != 'hidden'

— phyatt

30

हां, आप cssfunction का उपयोग कर सकते हैं। नीचे सभी divs की खोज करेंगे, लेकिन आप इसे उन तत्वों के लिए संशोधित कर सकते हैं जिनकी आपको आवश्यकता है

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

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

— jjhavokk
स्रोत

13

इस स्थिति का उपयोग करें:

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

— राना
स्रोत

11

दृश्यता की जाँच करने के लिए jQuery में दो विधियाँ हैं:

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

तथा

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

आप चयनकर्ता में दृश्यता के आधार पर कमांड निष्पादित कर सकते हैं;

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

या

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

— Luceos
स्रोत

6

नोट: यह चयनित तत्वों की विशिष्ट दृश्य विशेषता को वापस नहीं करेगा , जैसा कि प्रश्न पूछता है, क्योंकि :visibleयह माता-पिता की पूर्वजों की दृश्यता पर भी निर्भर करता है। यदि पूर्वज display: noneसभी वंशज हैं तो displayराज्य की परवाह किए बिना दिखाई नहीं देंगे ।

— कोडिंग

10

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

— बैरी चैपमैन
स्रोत

3

नोट: यह चयनित तत्वों की विशिष्ट दृश्य विशेषता को वापस नहीं करेगा , जैसा कि प्रश्न पूछता है, क्योंकि :visibleयह माता-पिता की पूर्वजों की दृश्यता पर भी निर्भर करता है। यदि पूर्वज display: noneसभी वंशज हैं तो displayराज्य की परवाह किए बिना दिखाई नहीं देंगे ।

— कोडिंग