انتخاب عناصر بر اساس visible بودن

 مسئله

ما نیاز داریم تا یک عنصر را بر اساس اینکه visible (قابل نمایش) هست یا نه انتخاب کنیم.

راه حل

ما می توانیم در صورت نیاز از فیلترهای hidden: یا visible: استفاده کنیم:

jQuery('div:hidden');

 در زیر مثال های بیشتری وجود دارند:

if (jQuery('#elem').is(':hidden')) {
// Do something conditionally
}
jQuery('p:visible').hide(); // Hiding only elements that are currently visible

توضیحات

نکته: از جی کوئری 1.3.2 به بعد، این فیلترها به طرز چشمگیری تغییر کرده اند. قبل از جی کوئری 1.3.2 ، هر دوی این فیلترها طبق انتظار برای پروپرتی visibility سی اس اس پاسخگو بودند، اما پس از نسخه 1.3.2 این موضوع دیگر مورد توجه قرار نمی گیرد. به جای آن، جی کوئری height و width عنصر مسئله را مورد تست قرار می دهد(بسته به offsetParent آن). اگر هردوی این اندازه ها برابر با 0 باشند، عنصر ما hidden در نظر گرفته می شود، در غیر این صورت visible در نظر گرفته می شود.

 اگر به کنترل بیشتری نیاز دارید، همواره می توانید از متد filter() جی کوئری استفاده کنید؛ که به ما امکان می دهد عنصر خود را هر طور که می خواهیم، تست و بررسی کنیم. بعنوان مثال، ممکن است بخواهیم تمام عناصری که به صورت display:none تنظیم شده اند را انتخاب کنیم، اما عناصری که به صورت visibility:hidden هستند را انتخاب نکنیم. اگر از فیلتر hidden: استفاده کنیم، کار نمی کند، زیرا دو خاصیت width یا height برای ورژن جی کوئری کوچکتر از 1.3.2 را تست می کند و یا اینکه برای جی کوئری بزرگتر یا مساوی 1.3.2 اصلا  این دو خصوصیت را اصلا در نظر نمی گیرد:

jQuery('*').filter(function(){
  return jQuery(this).css('display') === 'none'
         && jQuery(this).css('visibility') !== 'hidden';
});

کد بالا باعث می شود که ما یک مجموعه از عناصر داشته باشیم که به صورت display:none تنظیم شده اند اما visibility:hidden نیستند. توجه کنید که این انتخاب ها ضروری نیستند. و فیلتر hidden: در بسیاری از موقعیت ها قابل استفاده است.

 {module کمک نقدی به نویسنده}