چگونه می توانم در جی کوئری بررسی کنم که یک المنت hidden شده یا خیر ؟

امکان مشاهده یک المنت را می توان با استفاده از .hide() یا .show() یا .toggle() تغییر داد.

چگونه متوجه شویم یک المنت قابل مشاهده یا پنهان است؟

به عبارتی من لازم دارم بدونم که المنت x الان در صفحه داره دیده میشه (معلومه) یا قابل مشاهده نیست (پنهانه).

با استفاده از شبهه سلکتورهای :visible و :hidden در jQuery میتونید تشخیص بدید که یک المنت نمایش داده میشود یا خیر.

برای چک کردن وجود یک سلکتور بر روی المنت از تابع is(<selector>) استفاده میشود:

if($(el).is(":visible")) {
  console.log('Visible element');
}

if($(el).is(":hidden")) {
  console.log('Hidden element');
} 

نمونه عملی

اگر بخوایم با Vanilla JS (جاوااسکریپت خام) این بررسی رو انجام بدیم، طبق داکیومنتیشن ، ویژگی offsetParent یک المنت، نال NULL میشه اگه اون لمنت توسط ویژگی display (در سی اس اس CSS) غیر قابل نمایش (یا همون hidden) باشه.

نکته 1: حتی اگه والدین یک المنت باز دیسپلیشون display غیر قابل نمایش hidden باشه بازم NULL میشه offsetParent.

نکته 2: فقط باید دقت کنی که المنت فیکس نباشه. یعنی اگه ویژگی position: fixed; رو نداشته باشه، می تونی از کد پایین استفاده کنی:

// Select the element
var el = document.getElementById("yourElementId");

// Check visibility
if (isHidden(el)){
    console.log('The element is not visible in the page');
} else {
    console.log('The element is visible in the page');
}

/* Check function
 * @params js-element
 * @return boolean
 */
function isHidden(el) {
    return (el.offsetParent === null)
}

نکته 3: اما اگر ویژگی position: fixed; برای المنت مورد نظر ست شده، متاسفانه دیگه روش بالا جوابگو نیست و باید از window.getComputedStyle() استفاده کنی. یعنی تابع نهاییت باید یک همچین چیزی باشه:

/* Check function
 * @params js-element
 * @return boolean
 */
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

می دونم به سوالت برچسب jQuery رو زده بودی و احتمالا همون .is(":visible")ی که دوستمون آقای S Kill گفتن کارت رو راه می ندازه. ولی این جواب رو نوشتم برای کسایی که کلا جی کوئری رو ضمیمه پروژشون نکردن.

نکته 4: بد نیست که این نکته پایانی رو هم بگم که روش دوم یک مقداری کُنده. پس اگه لازم دارید توی یک لوپ (حلقه) یا چندین بار پشت سر هم این تابع رو صدا بزنید، ترجیحا ازش استفاده نکنید.