تجنب إنشاء عناصر .cell دون عناصر img

عندما يتم تحميل الصفحة، يتم إنشاء سلسلة من عناصر “.cell” في الوثيقة، ومع ذلك فإن قيمتها محدودة إذا لم يتم إضافة عنصر “img” داخلها. هذه العناصر تكون مفيدة فقط إذا تمت إضافة عنصر “img” إليها، ولذلك يجب تجنب إنشائها لأنها مرتبطة بإنشاء عناصر “li” أخرى.

لحل هذه المشكلة، يمكن استخدام حدث “DOMContentLoaded” لتنفيذ وظيفة تحقق مما إذا كان العنصر “img” قد تمت إضافته إلى العنصر “.cell” قبل إنشائه. في حالة عدم وجود عنصر “img” داخل “.cell”، يمكن إلغاء إنشاء هذه العناصر بالكامل.

اليكم كود الجافا سكريبت لتحقيق ذلك:

javascriptCopy code
document.addEventListener('DOMContentLoaded', function() {
    // Select all elements with class ".cell"
    var cells = document.querySelectorAll('.cell');

    // Loop through each ".cell" element
    cells.forEach(function(cell) {
        // Check if it has an "img" element inside
        var img = cell.querySelector('img');
        
        // If there is no "img" element, remove the ".cell" element
        if (!img) {
            cell.remove();
        }
    });
});

هذا الكود يقوم بتحديد جميع العناصر ذات الصنف “.cell” وفحص ما إذا كانت تحتوي على عنصر “img” داخلها. إذا لم يكن هناك عنصر “img”، فإن العنصر “.cell” سيتم إزالته من الوثيقة بأكملها.

باستخدام هذا الحل، يمكنك تجنب إنشاء العناصر “.cell” التي ليست لها قيمة مفيدة داخل التطبيق الخاص بك، وبالتالي تحسين أداء التطبيق وتنظيم هيكل الوثيقة بشكل أفضل.

بالطبع، إليك بعض المعلومات الإضافية المفيدة:

1. حدث DOMContentLoaded: هو حدث يتم إطلاقه عندما تكتمل تحميل الصفحة بالكامل، بما في ذلك تحميل وإظهار جميع العناصر والمحتوى. باستخدام حدث “DOMContentLoaded”، يمكن تنفيذ الأوامر الخاصة بك عندما يكون الوثيقة جاهزة للعرض.

2. querySelectorAll(): هي واجهة للبحث في الوثيقة عن عناصر يطابقون محدد الاختيار المعطى كباراميتر، وتعيد مجموعة من العناصر كائن NodeList.

3. forEach(): هو طريقة تساعد في تكرار العناصر في مصفوفة أو كائن NodeList، وتطبيق وظيفة معينة على كل عنصر.

4. remove(): هي طريقة تستخدم لإزالة العنصر من الوثيقة.

5. الاستعلامات الشرطية: في الكود السابق، تم استخدام شرطية if لفحص ما إذا كان هناك عنصر “img” داخل عنصر “.cell”، واستناداً إلى هذا الاختبار، يتم إما إزالة العنصر “.cell” أو تركه كما هو.

باستخدام هذه المعلومات، يمكنك فهم كيفية تنفيذ الحل بشكل دقيق وفعال، وكذلك تحديد الخطوات الأساسية التي يجب اتخاذها لتحقيق الهدف المطلوب.