jQuery में exists() क्यों नहीं है और बिना त्रुटियों के एलिमेंट कैसे जांचें

jQuery में exists() क्यों नहीं है और अपना कोड कैसे न तोड़ें

हर कोई जिसने कभी jQuery पर लिखा है, उसने इसका सामना किया है: आप किसी ऐसे एलिमेंट को एक्सेस करने का प्रयास करते हैं जो पेज पर नहीं है, और आपको एक त्रुटि मिलती है, स्क्रिप्ट क्रैश हो जाती है, उपयोगकर्ता को एक खाली स्क्रीन दिखाई देती है। स्वाभाविक रूप से सवाल उठता है: "क्या jQuery में exists() फ़ंक्शन है?"

यह प्रश्न Stack Overflow पर एक वास्तविक हिट है (150 हजार से अधिक बार देखा गया)। और उत्तर आपको आश्चर्यचकित करेगा: नहीं, jQuery में कोई अंतर्निहित exists() विधि नहीं है। लेकिन यह कोई बग नहीं, बल्कि एक फीचर है। इस लेख में, हम समझेंगे कि ऐसा क्यों है, शुरुआती (और न केवल) कौन सी गलतियाँ करते हैं और एलिमेंट के अस्तित्व की सही तरीके से जाँच कैसे करें। चलिए शुरू करते हैं!

संक्षिप्त उत्तर: "लंबाई" ही सब कुछ है

यह जाँचने का सबसे सरल और सही तरीका कि कोई एलिमेंट पेज पर मौजूद है या नहीं, length प्रॉपर्टी का उपयोग करना है। यदि jQuery ऑब्जेक्ट में कम से कम एक एलिमेंट है, तो length शून्य से अधिक होगा, जो बूलियन संदर्भ में true देता है।

if ($('#my-element').length) {\n    // एलिमेंट मौजूद है — काम कर सकते हैं\n    $('#my-element').show();\n} else {\n    // एलिमेंट नहीं है — कुछ न करें\n    console.log('एलिमेंट नहीं मिला');\n}

यह क्यों काम करता है? jQuery एक ऐरे जैसा ऑब्जेक्ट लौटाता है। यदि सेलेक्टर को कुछ नहीं मिला, तो इस ऑब्जेक्ट की लंबाई 0 होती है। JavaScript में 0 का मतलब false है।

आप इसे और छोटा भी लिख सकते हैं:

if ($('#my-element').length > 0) {\n    // यह भी काम करता है, लेकिन अनावश्यक है\n}

jQuery में एलिमेंट के अस्तित्व की जाँच करते समय शीर्ष 5 गलतियाँ

गलती #1: गैर-मौजूद एलिमेंट को सीधे एक्सेस करना

सबसे आम और खतरनाक गलती — खाली jQuery ऑब्जेक्ट पर विधि को कॉल करने का प्रयास:

// कोड जो त्रुटि के साथ क्रैश होगा\n$('#nonexistent').text('नमस्ते!');

वास्तव में, यह कोड क्रैश नहीं होगा। jQuery को इस तरह डिज़ाइन किया गया है कि खाली ऑब्जेक्ट पर विधियों को कॉल करने से कुछ नहीं होता। लेकिन समस्या यह है: यदि आप कोई मान प्राप्त करने का प्रयास करते हैं, जैसे .val(), तो आपको undefined मिलेगा। और यदि आप इंडेक्स के माध्यम से DOM एलिमेंट तक पहुँचने का प्रयास करते हैं — तो आपको Cannot read properties of undefined त्रुटि मिलेगी।

// लेकिन यह पहले से ही खतरनाक है!\nvar text = $('#nonexistent').text(); // खाली स्ट्रिंग लौटाएगा\nvar value = $('#nonexistent').val(); // undefined लौटाएगा\n\n// और यह — एक गारंटीकृत त्रुटि\nvar firstClass = $('#nonexistent')[0].className; // TypeError!

गलती #2: $(selector).size() का उपयोग करना

पहले jQuery में .size() विधि थी, जो एलिमेंट की संख्या लौटाती थी। इसे jQuery 1.8 में ही अप्रचलित घोषित कर दिया गया था और संस्करण 3.0 में पूरी तरह से हटा दिया गया। अब इसका उपयोग करना बुरा व्यवहार और संगतता के लिए जोखिम है।

// बुरा (अप्रचलित कोड)\nif ($('.my-class').size() > 0) { ... }\n\n// अच्छा (आधुनिक दृष्टिकोण)\nif ($('.my-class').length) { ... }

गलती #3: .is() और फ़िल्टरिंग में भ्रम

.is() विधि जाँचती है कि वर्तमान एलिमेंट किसी सेलेक्टर से मेल खाता है या नहीं। यह एलिमेंट के अस्तित्व की जाँच नहीं करता, बल्कि पहले से मिले एलिमेंट के साथ काम करता है। शुरुआती अक्सर ऐसा कुछ लिखते हैं:

// गलत: .is() अस्तित्व की जाँच का विकल्प नहीं है\nif ($('#my-element').is('*')) {\n    // क्या एलिमेंट मौजूद है?\n}

यह काम करेगा, लेकिन अजीब और अकुशल लगता है। .is('*') बस यह जाँचता है कि एलिमेंट कोई भी टैग है। यदि एलिमेंट मौजूद है — true लौटाएगा, यदि नहीं — false। लेकिन जब .length मौजूद है तो ऐसी जटिलताओं की क्या आवश्यकता?

गलती #4: document.getElementById के माध्यम से जाँच करना

कुछ डेवलपर शुद्ध JavaScript और jQuery को मिलाते हैं जब इसकी आवश्यकता नहीं होती:

// अनावश्यक और बदसूरत\nif (document.getElementById('my-element')) {\n    $('#my-element').addClass('acti