Как проверить, скрыт ли элемент в jQuery?

Можно переключать видимость элемента, используя функции .hide(), .show() или .toggle()?

Как бы вы проверили, является ли элемент видимым или скрытым?

7380
задан buræquete 18 July 2019 в 10:40
поделиться

4 ответа

Так как вопрос относится к единственному элементу, этот код мог бы более подойти:

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

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

То же как предложение twernt, но относившийся единственный элемент; и это соответствия алгоритм рекомендовано в jQuery FAQ

9059
ответ дан Black 18 July 2019 в 10:40
поделиться

Можно использовать hidden селектор:

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

И visible селектор:

// Matches all elements that are visible
$('element:visible')
1403
ответ дан twernt 18 July 2019 в 10:40
поделиться
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Выше метода не рассматривает видимости родителя. Для рассмотрения родителя также необходимо использовать .is(":hidden") или .is(":visible").

, Например,

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

вышеупомянутый метод рассмотрит div2 видимый в то время как :visible нет. Но вышеупомянутое могло бы быть полезным во многих случаях, особенно когда необходимо найти, существуют ли какие-либо ошибочные отделения, видимые в скрытом родителе, потому что в таких условиях :visible не будет работать.

892
ответ дан Shadow 18 July 2019 в 10:40
поделиться
  • 1
    Да, нет никакой потребности использовать " Convert". спасибо @tnw – Ishan Jain 27 January 2014 в 18:04

Часто, проверяя, видно что-то или нет, вы сразу же идете дальше и делаете с этим что-то еще. Цепочка jQuery упрощает это.

Итак, если у вас есть селектор, и вы хотите выполнить какое-либо действие с ним, только если он виден или скрыт, вы можете использовать filter (": visible") или ] фильтр (": скрыто" ) с последующим связыванием его с действием, которое вы хотите предпринять.

Итак, вместо оператора if , например:

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

Или более эффективно, но еще хуже:

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

You все это можно сделать одной строкой:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
278
ответ дан 22 November 2019 в 19:37
поделиться
Другие вопросы по тегам:

Похожие вопросы: