jQuery: कैसे जाँचें कि कोई तत्व छिपा है या नहीं? (शुरुआती लोगों के लिए विवरण)

परिचय: यह प्रश्न हर फ्रंटएंड डेवलपर को क्यों परेशान करता है

एक स्थिति की कल्पना करें: आप एक ड्रॉपडाउन मेनू, मोडल विंडो या अकॉर्डियन के साथ एक इंटरैक्टिव पेज लिख रहे हैं। उपयोगकर्ता एक बटन पर क्लिक करता है, और ब्लॉक को आसानी से दिखाई देना या गायब होना चाहिए। लेकिन क्या होगा यदि आप गलती से पहले से छिपे हुए तत्व को एनिमेट करने का प्रयास करते हैं? या, इसके विपरीत, वह दिखाते हैं जो पहले से दिख रहा है? परिणाम — बग, हिलता हुआ इंटरफ़ेस और निराश उपयोगकर्ता।

यही कारण है कि प्रश्न "How do I check if an element is hidden in jQuery?" Stack Overflow पर सबसे लोकप्रिय में से एक है। इसके एक हजार से अधिक उत्तर दिए गए हैं, और यह कोई संयोग नहीं है। किसी तत्व की दृश्यता को सही ढंग से निर्धारित करने की क्षमता एक बुनियादी कौशल है जो आपको डिबगिंग के घंटे बचाएगा।

इस लेख में, हम विस्तार से जानेंगे कि jQuery का उपयोग करके कैसे जाँचें कि कोई तत्व छिपा है या नहीं। आप खतरों, display:none और visibility:hidden के बीच अंतर के बारे में जानेंगे, और विश्वसनीय कोड लिखना सीखेंगे। चलिए शुरू करते हैं!

.is(':hidden') विधि — आपका मुख्य उपकरण

यह जाँचने का सबसे सरल और सबसे सामान्य तरीका है कि कोई तत्व छिपा है या नहीं, :hidden स्यूडो-सेलेक्टर के साथ .is() विधि का उपयोग करना है। jQuery इसे बॉक्स से बाहर प्रदान करता है।

यह कैसे काम करता है

jQuery में :hidden सेलेक्टर उन तत्वों का चयन करता है जो:

\n
• CSS गुण display: none रखते हैं;
\n
• <input type="hidden"> प्रकार के तत्व हैं;
\n
• चौड़ाई और ऊंचाई शून्य के बराबर रखते हैं (उदाहरण के लिए, width: 0; height: 0);
\n
• किसी छिपे हुए मूल तत्व के वंशज हैं (अदृश्यता प्राप्त करते हैं)।
\n

सबसे सरल जाँच इस प्रकार दिखती है:

// जाँचें कि id="myDiv" वाला तत्व छिपा है या नहीं\nif ($('#myDiv').is(':hidden')) {\n    console.log('तत्व छिपा हुआ है!');\n} else {\n    console.log('तत्व दिखाई दे रहा है।');\n}

.is(':visible') के माध्यम से दृश्यता की जाँच

उलटा तर्क के लिए :visible सेलेक्टर का उपयोग करें:

if ($('#myDiv').is(':visible')) {\n    console.log('तत्व पृष्ठ पर दिखाई दे रहा है।');\n}

दोनों दृष्टिकोण तेज़ी से काम करते हैं और सहज रूप से समझ में आते हैं। लेकिन एक बारीकियां है: यदि तत्व visibility: hidden या opacity: 0 के साथ छिपा हुआ है तो क्या होगा? jQuery ऐसे तत्वों को दृश्यमान मानता है, जो अक्सर शुरुआती लोगों के लिए आश्चर्य की बात होती है।

खतरे: visibility: hidden और opacity: 0

कई डेवलपर गलती से मानते हैं कि :hidden तत्व को छिपाने के किसी भी तरीके पर प्रतिक्रिया करता है। ऐसा नहीं है।

visibility: hidden के साथ उदाहरण

गुण visibility: hidden तत्व को अदृश्य बनाता है, लेकिन यह अभी भी पृष्ठ पर स्थान घेरता है। jQuery ऐसे तत्व को दृश्यमान मानता है, क्योंकि इसके आयाम शून्य के बराबर नहीं हैं।

<div id="myBox" style="visibility: hidden;">मैं अदृश्य हूँ, लेकिन जगह घेरता हूँ</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

opacity: 0 के साथ उदाहरण

यही बात पारदर्शिता पर भी लागू होती है:

<div id="transparentBox" style="opacity: 0;">पारदर्शी, लेकिन jQuery के लिए दृश्यमान</div>\n\n<script>\nconsole.log( $('#transparentBox').is(':hidden') );  // false\n</script>

यदि आपका कोड fadeIn()/fadeOut() या पारदर्शिता एनीमेशन का उपयोग करता है, तो मानक :hidden जाँच आपको विफल कर देगी। ऐसे मामलों के लिए, आपको विशिष्ट CSS गुण की जाँच करने की आवश्यकता है।

visibility: hidden या opacity: 0 की जाँच कैसे करें

जब आपको यह जानने की आवश्यकता हो कि क्या कोई तत्व इन गुणों का उपयोग करके छिपा हुआ है, तो .css() का उपयोग करें:

visibility की जाँच

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('तत्व visibi