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

  • آخرین بروزرسانی پرسش در کاپ کد در شنبه 28 مارس 2020

آیا امکان داره با استفاده از توابع .hide()، .show() یا .toggle() یک المنت رو پنهان کرد یا نمایش داد؟

چطور میشه visible یا hidden بودن یک المنت رو بررسی کرد؟

پرسش 🔝امتیازی
تعداد بازدید2606739
امتیاز7639👍
رای7654👍
📅 پرسش در
📅 آخرین ویرایش

برای این پرسش 5 پاسخ وجود دارد

5

با توجه به این که پرسش به یک المنت اشاره داره، این کد میتونه بهتر باشه:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

درست مثل پیشنهادی که twernt داده با این تفاوت که روی یک المنت اعمال میشه؛ از طرفی با الگوریتمی که درصفحه سوالات متداول jQuery پیشنهاد شده هم مطابق هست.

از is() جی کوئری برای بررسی المنت select شده با المنت دیگه، selector دیگه یا سایر آبجکت های جی کوئری استفاده می کنیم. این متد در کل المنت های DOM حرکت میکنه تا یک مطابقت با پارامتر های پاس داده شده پیدا کنه. اگر مطابقتی باشه true و اگر نباشه false بر می گردونه.

امتیاز9311👍

پاسخ تایید شده
📅 پاسخ در
📅 آخرین ویرایش
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

متد بالا وضعیت نمایش parent رو در نظر نمی گیره. برای در نظر گرفتن وضعیت نمایش parent باید از .is(":hidden") یا .is(":visible") استفاده کنی.

برای مثال،

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

متد بالا div2 رو آشکار در نظر می گیره در حالی که :visible این کار رو نمیکنه. اما متد بالا میتونه در بسیاری از مواقع کاربرد داشته باشه، به ویژه زمانی که نیاز داری بدونی که آیا div اشتباهی توی parent پنهان شده وجود داره یا خیر که در این شرایط :visible کمکی نمیکنه.

امتیاز935👍

📅 پاسخ در
📅 آخرین ویرایش

میتونی از hidden selectorاستفاده کنی:

// Matches all elements that are hidden
$('element:hidden')

و visible selector :

// Matches all elements that are visible
$('element:visible')

امتیاز1444👍

📅 پاسخ در
📅 آخرین ویرایش

معمولا زمانی که بررسی می کنیم که آیا یک چیزی پنهان هست یا آشکار، می خواهیم که بعد از فهمیدن این موضوع مستقیم یک کاری هم با اون المنت انجام بدیم. زنجیره بندی jQuery این کار رو ساده می کنه.

بنابراین اگر یک selector داری و میخوای فقط در صورتی که پنهان یا آشکار هست یک سری کار ها روش انجام بدی، میتونی از filter(":visible") یا filter(":hidden")و در ادامه اون هم کاری که میخوای انجام بشه، استفاده کنی.

بنابراین، به جای یک عبارت if ، مثل این

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

یا حتی بهتر اما باز هم ناجور:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

میتونی با یک خط کد این کار رو انجام بدی:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

امتیاز290👍

📅 پاسخ در
📅 آخرین ویرایش

از How do I determine the state of a toggled element?


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

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

اگر فقط قراره روی یک المنت وابسته به این که پنهان هست یا آشکار کاری انجام بدی، میتونی در عبارت selector از :visible یا :hidden استفاده کنی. برای مثال:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

امتیاز387👍

📅 پاسخ در
📅 آخرین ویرایش
برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!
guest
0 دیدگاه ها
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
0
افکار شما را دوست داریم، لطفا نظر دهید.x