كيفية التحقق مما إذا كان عنصر مخفيًا في jQuery

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

استخدام محدد :hidden

أبسط طريقة للتحقق مما إذا كان العنصر مخفيًا هي استخدام:hiddenselector معis()الطريقة:

if ($( #myElement ).is( :hidden )) { console.log( Element is hidden ); }

يعتبر العنصر مخفيًا إذا استوفى أيًا من هذه المعايير: CSS display يساوي none، أو width و height يساويان 0، أو العنصر الأب مخفي.

استخدام محدد :visible

🎨 AI Generated: استخدام محدد :visible

بدلاً من ذلك، يمكنك التحقق مما إذا كان العنصر مرئيًا:

if ($( #myElement ).is( :visible )) { console.log( Element is visible ); } else { console.log( Element is hidden ); }

فحص خاصية CSS Display

للتحكم بشكل أكثر تحديداً، تحقق من خاصية CSS display مباشرة:

if ($( #myElement ).css( display ) === none ) { console.log( Element has display: none ); }

فحص خاصية Visibility

🎨 AI Generated: Checking Visibility Property

للتحقق مما إذا كان العنصر يحتوي علىvisibility: hidden:

if ($( #myElement ).css( visibility ) === hidden ) { console.log( Element has visibility: hidden ); }

Best Practices

استخدام:hiddenو:visibleلفحوصات الرؤية العامة. للتطبيقات الحساسة للأداء التي تحتوي على عناصر كثيرة، احفظ محددات jQuery في الذاكرة المؤقتة وفكر في استخدام بدائل vanilla JavaScript مثلoffsetParent or getComputedStyle().

تذكر أن:hiddenلا يكتشف العناصر التي لديهاopacity: 0أو موضوع خارج الشاشة، لذا اختر طريقتك بناءً على متطلباتك المحددة.