چگونه پنهان بودن یک المنت در جی کوئری را بررسی کنم؟
آیا امکان داره با استفاده از توابع .hide()، .show() یا .toggle() یک المنت رو پنهان کرد یا نمایش داد؟
چطور میشه visible یا hidden بودن یک المنت رو بررسی کرد؟
برای این پرسش 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👍
Mote
میتونی از hidden selectorاستفاده کنی:
// Matches all elements that are hidden
$('element:hidden')
و visible selector :
// Matches all elements that are visible
$('element:visible')
امتیاز1444👍
twernt
معمولا زمانی که بررسی می کنیم که آیا یک چیزی پنهان هست یا آشکار، می خواهیم که بعد از فهمیدن این موضوع مستقیم یک کاری هم با اون المنت انجام بدیم. زنجیره بندی 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👍
Simon_Weaver
از 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👍
user574889
