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

Question

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

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

Answer 1

Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:

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

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

То же, что и предложение Тверна , но применяется к одному элементу; соответствует алгоритму, рекомендованному в FAQ по jQuery

Answer 2

Вы можете использовать селектор hidden:

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

И селектор visible:

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

Answer 3

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 нет. Но вышеупомянутое может быть полезно во многих случаях, особенно когда вам нужно выяснить, есть ли какие-либо div-ошибки, видимые в скрытом родителе, потому что в таких условиях :visible не будет работать.

Answer 4

Ни один из этих ответов не относится к тому, что я понимаю, к вопросу, который я искал, "Как мне обращаться с предметами, которые имеют visibility: hidden?" . Ни :visible, ни :hidden не справятся с этим, так как они оба ищут отображение согласно документации. Насколько я мог определить, нет селектора для обработки видимости CSS. Вот как я решил (стандартные селекторы jQuery, может быть более сжатый синтаксис):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

Answer 5

С Как определить состояние переключаемого элемента?

---

Вы можете определить, свернут или нет элемент, используя селекторы :visible и :hidden.

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

Если вы просто воздействуете на элемент в зависимости от его видимости, вы можете просто включить :visible или :hidden в выражение выбора. Например:

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

Answer 6

Зачастую, проверяя, является ли что-то видимым или нет, вы собираетесь немедленно пойти дальше и сделать что-то еще с этим. JQuery Chaining делает это легко.

Таким образом, если у вас есть селектор и вы хотите выполнить какое-либо действие с ним только в том случае, если он видим или скрыт, вы можете использовать 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" });

Answer 7

Селектор :visible в соответствии с документацией jQuery :

• Они имеют значение CSS display none.
• Это элементы формы с type="hidden".
• Их ширина и высота явно установлены на 0.
• Элемент-предок скрыт, поэтому элемент не отображается на странице.

Элементы с visibility: hidden или opacity: 0 считаются видимыми, поскольку они все еще занимают место в макете.

Это полезно в некоторых случаях и бесполезно в других, потому что если вы хотите проверить, видим ли элемент (display != none), игнорируя видимость родителей, вы обнаружите, что выполнение .css("display") == 'none' не только быстрее, но также вернет проверку видимости правильно.

Если вы хотите проверить видимость вместо дисплея, вы должны использовать: .css("visibility") == "hidden".

Также примите во внимание дополнительные примечания jQuery :

Поскольку :visible является расширением jQuery и не является частью спецификации CSS, запросы, использующие :visible, не могут воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным методом DOM querySelectorAll(). Чтобы добиться максимальной производительности при использовании :visible для выбора элементов, сначала выберите элементы с помощью чистого селектора CSS, а затем используйте .filter(":visible").

Кроме того, если вас беспокоит производительность, вы должны проверить Теперь вы видите меня… показать / скрыть производительность (2010-05-04). И используйте другие методы, чтобы показать и скрыть элементы.

Answer 8

Это работает для меня, и я использую show() и hide(), чтобы сделать мой div скрытым / видимым:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

Answer 9

Как видимость элемента и jQuery работает ;

Элемент может быть скрыт с помощью display:none, visibility:hidden или opacity:0. Разница между этими методами:

• display:none скрывает элемент и не занимает места;
• visibility:hidden скрывает элемент, но он все еще занимает место в макете;

• opacity:0 скрывает элемент как «видимость: скрытый», и он все еще занимает место в макете; единственное отличие состоит в том, что непрозрачность позволяет сделать элемент частично прозрачным;

  if ($('.target').is(':hidden')) {
    $('.target').show();
  } else {
    $('.target').hide();
  }
  if ($('.target').is(':visible')) {
    $('.target').hide();
  } else {
    $('.target').show();
  }
  
  if ($('.target-visibility').css('visibility') == 'hidden') {
    $('.target-visibility').css({
      visibility: "visible",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      visibility: "hidden",
      display: ""
    });
  }
  
  if ($('.target-visibility').css('opacity') == "0") {
    $('.target-visibility').css({
      opacity: "1",
      display: ""
    });
  } else {
    $('.target-visibility').css({
      opacity: "0",
      display: ""
    });
  }
  

  Полезные методы переключения jQuery:

  $('.click').click(function() {
    $('.target').toggle();
  });
  
  $('.click').click(function() {
    $('.target').slideToggle();
  });
  
  $('.click').click(function() {
    $('.target').fadeToggle();
  });
  

Answer 10

Я бы использовал CSS класс .hide { display: none!important; }.

Для сокрытия / показа я звоню .addClass("hide")/.removeClass("hide"). Для проверки видимости я использую .hasClass("hide").

Это простой и понятный способ проверить / скрыть / показать элементы, если вы не планируете использовать методы .toggle() или .animate().