لماذا لا توجد دالة exists() في jQuery وكيفية التحقق من العنصر دون أخطاء

لماذا لا توجد exists() في jQuery وكيف لا تفسد الكود الخاص بك

كل من كتب jQuery ولو مرة واحدة واجه هذا: تحاول الوصول إلى عنصر غير موجود في الصفحة، وتحصل على خطأ، يتعطل السكريبت، ويرى المستخدم شاشة فارغة. يطرح السؤال بشكل طبيعي: "هل توجد دالة exists() في jQuery؟".

هذا السؤال هو من أكثر الأسئلة شيوعًا على Stack Overflow (أكثر من 150 ألف مشاهدة). والإجابة ستفاجئك: لا، لا توجد دالة مدمجة exists() في jQuery. لكن هذا ليس خطأ، بل ميزة. في هذه المقالة، سنشرح لماذا حدث ذلك، وما هي الأخطاء التي يرتكبها المبتدئون (وغيرهم) وكيفية التحقق من وجود العناصر بشكل صحيح. هيا بنا!

إجابة مختصرة: "الطول" هو كل شيء

أبسط وأصح طريقة للتحقق مما إذا كان العنصر موجودًا في الصفحة هي استخدام الخاصية length. إذا كان كائن jQuery يحتوي على عنصر واحد على الأقل، فسيكون length أكبر من الصفر، مما يعطي true في السياق المنطقي.

if ($('#my-element').length) {\n    // العنصر موجود - يمكن العمل عليه\n    $('#my-element').show();\n} else {\n    // العنصر غير موجود - لا نفعل شيئًا\n    console.log('العنصر غير موجود');\n}

لماذا يعمل هذا؟ jQuery يُرجع كائنًا يشبه المصفوفة. إذا لم يجد المحدد أي شيء، فإن طول هذا الكائن يساوي 0. 0 في JavaScript هو false.

يمكنك الكتابة بشكل أقصر:

if ($('#my-element').length > 0) {\n    // هذا يعمل أيضًا، لكنه زائد عن الحاجة\n}

أفضل 5 أخطاء عند التحقق من وجود العناصر في jQuery

الخطأ #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()

سابقًا، كانت هناك دالة .size() في jQuery تُرجع عدد العناصر. تم اعتبارها قديمة منذ 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