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

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

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

7.10.2008 13:03:18
Стоит упомянуть (даже после всего этого времени), что $(element).is(":visible")работает для jQuery 1.4.4, но не для jQuery 1.3.2, в Internet & nbsp; Explorer & nbsp; 8 . Это можно проверить с помощью полезного фрагмента теста Цветомира Цонева . Просто не забудьте изменить версию jQuery, чтобы проверить под каждой.
Reuben 1.02.2011 03:57:34
Это связано, хотя с другим вопросом: stackoverflow.com/questions/17425543/…
Mark Schultheiss 22.03.2016 19:20:54
30 ОТВЕТОВ
РЕШЕНИЕ

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

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

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

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

Мы используем jQuery is () для проверки выбранного элемента с другим элементом, селектором или любым объектом jQuery. Этот метод перемещается по элементам DOM, чтобы найти совпадение, которое удовлетворяет переданному параметру. Он вернет true, если есть совпадение, иначе вернет false.

9345
11.10.2019 04:19:58
Это решение, кажется, поощряет путаницу visible=falseи display:none; в то время как решение Моте явно не учитывает намерение кодеров проверить display:none; (через упоминание о display:nonevisible=true
kralco626 29.12.2010 18:30:57
Это правильно, но :visibleтакже проверит, видимы ли родительские элементы, как указал Чиборг.
Tsvetomir Tsonev 6.01.2011 12:30:27
У вас есть точка - я поясню, что код проверяет только для displayсвойства. Учитывая, что оригинальный вопрос для show()и hide(), и они задают display, мой ответ правильный. Кстати, он работает с IE7, вот тестовый фрагмент - jsfiddle.net/MWZss ;
Tsvetomir Tsonev 14.01.2011 16:54:41
На самом деле я обнаружил, что слова с обратной логикой лучше:! $ ('Селектор'). Is (': hidden'); по какой-то причине. Стоит попробовать.
Kzqai 5.01.2012 15:36:15
Вот простое тестирование производительности () для регулярного выражения: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Вывод: если вы стремитесь к производительности, используйте regexp over is () (поскольку is () сначала ищет все скрытые узлы, прежде чем посмотреть на фактический элемент).
Max Leske 22.06.2012 14:12:11
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не будет работать.

942
2.08.2018 06:57:48
Это проверяет только для свойства отображения одного элемента. Атрибут: visible проверяет также видимость родительских элементов.
chiborg 3.03.2010 10:10:48
Это единственное решение, которое работало для меня при тестировании с IE 8.
evanmcd 13.01.2012 18:51:41
@chiborg Да, но иногда это то, что вы хотите, и мне пришлось нелегко узнать, насколько «умным» был jQuery ...
Casey 14.03.2014 17:56:14
Это действительно отвечает на вопрос, является вопрос о одном элементе и с помощью hide(), show()и toggle()функции, однако, как большинство из них уже сказал, мы должны использовать :visibleи :hiddenпсевдо-классы.
Jimmy Knoot 14.04.2015 09:18:30
Этот ответ можно использовать, когда элемент существует, но в данный момент отсутствует на странице, например, после detach ().
atheaos 25.04.2017 16:05:39

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

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

И visibleселектор:

// Matches all elements that are visible
$('element:visible')
1452
8.03.2018 15:38:27
только будьте осторожны, в этой презентации есть несколько полезных советов, связанных с производительностью: addyosmani.com/jqprovenperformance
codecraig 11.07.2011 17:05:57
На страницах с 21 по 28 показано, как медленно: скрытый или: видимый сравнивается с другими селекторами. Спасибо за указание на это.
Etienne Dupuis 4.07.2012 20:12:04
Когда вы имеете дело с парой элементов, и очень мало что происходит - то есть АБСОЛЮТНО БОЛЬШОЕ БОЛЬШИНСТВО СЛУЧАЙ - проблема времени является смехотворно незначительной проблемой. О нет! Это заняло 42 мс вместо 19 мс !!!
vbullinger 20.02.2013 14:56:49
Я переключаю элемент с помощью этого селектора. $ ('element: hidden') всегда верно для меня!
ZoomIn 9.08.2013 07:18:33
@cwingrav Вы можете перечитать документацию: скрытый относится ко всем элементам. Элементы формы с type="hidden"одним только случаем, который может вызвать: скрытый. Элементы без высоты и ширины, элементы с display: noneи элементы со скрытыми предками также будут квалифицироваться как: скрытые.
Joshua Walsh 15.01.2016 04:15:16

Часто, проверяя, является ли что-то видимым или нет, вы сразу же идете прямо вперед и делаете с этим что-то еще. JQuery цепочка делает это легко.

Поэтому, если у вас есть селектор и вы хотите выполнить какое-либо действие с ним только в том случае, если он видим или скрыт, вы можете использовать его 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" });
293
27.04.2015 20:10:05
Нет причин извлекать узел DOM из фрагмента, использованного в примере, а затем искать его снова. Лучше просто сделать: var $ button = $ ('# btnUpdate'); А затем в выражениях If просто используйте кнопку $ вместо $ (кнопка). Имеет преимущество кэширования объекта jQuery.
LocalPCGuy 21.04.2012 22:32:30
Вот простой пример jquerypot.com/…
Ketan Savaliya 29.04.2018 13:28:08

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


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

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

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

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
389
12.01.2016 14:08:58
Интересно, почему в ответе не упоминается случай, когда элемент удален от видимого окна, например top:-1000px... Думаю, это
jazzcat 8.05.2017 09:34:11

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

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
525
26.06.2017 07:12:02
С этим ответом хорошо обращаться visibilityбуквально, но вопрос был How you would test if an element has been hidden or shown using jQuery?. Использование jQuery означает: displayсвойство.
MarioDS 11.05.2013 22:37:45
Элементы с visibility: hiddenили opacity: 0считаются видимыми, поскольку они по-прежнему занимают место в макете. Смотрите ответ Педро Райнхо и документацию jQuery на :visibleселекторе.
awe 16.10.2013 09:12:04
вам нужно пройти DOM, чтобы проверить родителей узла, иначе это бесполезно.
vsync 22.04.2014 19:20:11

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

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
213
14.12.2015 21:32:03

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

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

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

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

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

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

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

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

242
21.06.2017 01:41:47

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

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

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

161
19.03.2014 08:15:37
.hasClass('hide')не проверяет, является ли предок родителя скрытым (что также сделает его скрытым). Вы могли бы заставить это работать правильно, проверив .closest('.hide').length > 0, но зачем изобретать велосипед?
nbrooks 25.09.2012 23:57:15
Вариант, который вы предлагаете, возвращает, если элемент виден в html, мой вариант возвращает, если элемент был непосредственно скрыт вашим движком кода JavaScript / представления. Если вы знаете, что родительские элементы никогда не должны быть скрыты - используйте .hasClass (), чтобы быть более строгим и предотвратить будущие ошибки. Если вы хотите проверить не только видимость, но и состояние элемента, установленного - тоже используйте .hasClass (). В других случаях лучше использовать .closest ().
Evgeny Levin 1.12.2012 20:27:09
Почему вы просто не используете .is (": visible")?
dont_trust_me 16.10.2018 09:43:43

Другой ответ, который вы должны принять во внимание: если вы скрываете элемент, вы должны использовать jQuery , но вместо того, чтобы фактически скрыть его, вы удаляете весь элемент, но копируете его HTML- содержимое и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя обычный if (!$('#thetagname').length).

119
26.03.2013 22:12:11

Как работает видимость элемента и 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();
    });
213
30.07.2017 22:00:31
Другое различие между visibility:hiddenи opacity:0заключается в том, что элемент по-прежнему будет реагировать на события (например, щелчки) opacity:0. Я узнал этот трюк, создав пользовательскую кнопку для загрузки файлов.
urraka 29.06.2012 18:15:21
также, если вы скрываете ввод с непрозрачностью: 0, он по-прежнему выбирается с помощью клавиши табуляции
YangombiUmpakati 12.12.2017 11:08:36

Можно просто использовать атрибут hiddenor visible, например:

$('element:hidden')
$('element:visible')

Или вы можете упростить то же самое с IS следующим образом .

$(element).is(":visible")
134
16.03.2013 10:04:04

ebdivдолжен быть установлен в style="display:none;". Это работает как для показа, так и для скрытия:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
131
26.10.2018 07:33:26

Вы также можете сделать это с помощью простого JavaScript:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Ноты:

  1. Работает везде

  2. Работает для вложенных элементов

  3. Работает для CSS и встроенных стилей

  4. Не требует рамки

160
19.03.2014 08:15:29
Работает немного иначе, чем в jQuery; он считает visibility: hidden, что видно .
alex 20.09.2012 04:45:23
Достаточно просто изменить приведенный выше код, чтобы имитировать (возможно, глупое) поведение jQuery. , , , , function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} иначе if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} вернуть false;}
Matt Brock 26.09.2012 13:57:30
Конечно, я только добавил это для пользователей, которые использовали это без сканирования его кода. :)
alex 26.09.2012 21:33:20

Это может работать:

expect($("#message_div").css("display")).toBe("none");
89
6.03.2013 06:41:05
Какой это язык / диалект / библиотека? Я не знаком с этим синтаксисом в JS ...
nbrooks 25.09.2012 23:31:33

Демо-ссылка

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Источник:

Blogger Plug n Play - Инструменты и виджеты jQuery: как узнать, скрыт ли элемент или виден с помощью jQuery

139
27.08.2019 07:08:33
@ Adrew, но по этой ссылке показан рабочий пример этой функции. Я думаю, что практический ответ может весить более полной страницы текста :)
Code Spy 25.01.2013 06:30:44

Чтобы проверить, если он не виден, я использую !:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

Или следующее также sam, сохраняя селектор jQuery в переменной, чтобы иметь лучшую производительность, когда вам это нужно несколько раз:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
67
14.09.2013 08:01:52
Как вы определили, что сохранение селектора в переменной действительно быстрее?
Ilia Rostovtsev 20.06.2013 21:32:30
Привет @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Там вы можете запустить тест. В любом случае, приятно иметь кеширование, чтобы к нему можно было быстрее обращаться
Matthias Wegtun 21.06.2013 06:56:50
Это подходит, если вы хотите использовать одну переменную в процессе вместо вызова и вызова одного и того же объекта.
Kenneth Palaganas 25.08.2013 16:57:09

Используйте переключение классов, а не редактирование стилей. , ,

Использование классов, предназначенных для «сокрытия» элементов, легко, а также является одним из наиболее эффективных методов. Переключение класса «скрытый» со Displayстилем «нет» будет выполняться быстрее, чем непосредственное редактирование этого стиля. Я объяснил кое-что из этого довольно подробно в вопросе переполнения стека. Превращение двух элементов, видимых / скрытых в одном и том же элементе div .


Лучшие практики и оптимизация JavaScript

Вот действительно поучительное видео о Google Tech Talk, разработанном инженером Google Николасом Закасом:

61
23.05.2017 12:10:45

Пример:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

75
16.07.2017 13:52:00

Также вот троичное условное выражение, чтобы проверить состояние элемента и затем переключить его:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
30
5.11.2013 23:32:02
Или, ну, просто избавьтесь от всего условного и скажите $('elementToToggle').toggle('slow');...:)
nbrooks 25.12.2013 08:53:21
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
7.12.2013 13:51:23

Вы должны проверить оба ... Отображение, а также видимость:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Если мы проверяем $(this).is(":visible"), jQuery автоматически проверяет обе вещи.

51
19.07.2014 15:23:42

Потому что Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(как описано для jQuery: visible Selector ) - мы можем проверить, действительно ли элемент виден таким образом:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});
34
20.03.2014 10:32:25

В конце концов, ни один из примеров меня не устраивает, поэтому я написал свой собственный.

Тесты (без поддержки Internet Explorer filter:alpha):

а) Проверьте, не скрыт ли документ

б) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или display:none/ visibility:hiddenво встроенных стилях

c) Убедитесь, что центр (и потому что он быстрее, чем тестирование каждого пикселя / угла) элемента не скрыт другим элементом (и всеми предками, например: overflow:hidden/ scroll / one element over enother) или краями экрана

d) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или display:none/ видимость: скрыто в вычисляемых стилях (среди всех предков)

Проверено на

Android 4.4 (собственный браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (режимы документов Internet Explorer 5-11 + Internet Explorer 8 на компьютере). виртуальная машина), Safari (Windows / Mac / iOS)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Как пользоваться:

is_visible(elem) // boolean
58
28.04.2014 18:10:50
.is(":not(':hidden')") /*if shown*/
27
12.04.2014 07:38:40
Потому что: not (': hidden') - это не то же самое, что и (': visible'). «Видимый» работает с css «непрозрачность», а не с JQuery «show () / hide ()». Плюс, нет дополнительной цитаты. Каждый набор играет роль в этом маленьком коде.
Kareem 1.09.2015 06:42:13
1) :visibleи :hiddenпроверяйте видимость элемента CSS и предка, а не только то, display: noneчто вы сейчас предлагаете. 2) кавычки внутри псевдо-селектора являются не требуются , если селектор содержит только :и буквенно - цифровые (например , :not(:hidden)такие же , как not(':hidden')(только немного быстрее) и 3) , как вы стали лучше , если вы не можете принять , что вы на самом деле можете быть некорректными иногда? :)
Gone Coding 1.09.2015 07:26:19

При тестировании элемента с :hiddenселектором в jQuery следует учитывать, что элемент с абсолютным позиционированием может быть распознан как скрытый, хотя его дочерние элементы являются видимыми .

Во-первых, это кажется несколько нелогичным - хотя более внимательный взгляд на документацию jQuery дает соответствующую информацию:

Элементы могут считаться скрытыми по нескольким причинам: [...] их ширина и высота явно установлены на 0. [...]

Так что это действительно имеет смысл в отношении блочной модели и вычисляемого стиля для элемента. Даже если ширина и высота не установлены явно в 0, они могут быть установлены неявно .

Посмотрите на следующий пример:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>


ОБНОВЛЕНИЕ ДЛЯ JQUERY 3.x:

С jQuery 3 описанное поведение изменится! Элементы будут считаться видимыми, если у них есть какие-либо поля макета, в том числе с нулевой шириной и / или высотой.

JSFiddle с jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

Тогда тот же JS будет иметь такой вывод:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
98
6.08.2016 08:53:27

Просто проверьте видимость, проверив логическое значение, например:

if (this.hidden === false) {
    // Your code
}

Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible')для проверки видимости элемента.

37
16.07.2017 13:56:39

Но что, если CSS элемента похож на следующее?

.element{
    position: absolute;left:-9999;    
}

Таким образом, этот ответ на вопрос переполнения стека Как проверить, находится ли элемент вне экрана, также должен быть рассмотрен.

32
23.05.2017 11:55:02

Можно создать функцию для проверки атрибутов видимости / отображения, чтобы определить, отображается ли элемент в пользовательском интерфейсе или нет.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Рабочая скрипка

30
22.11.2014 11:23:57

Может быть, вы можете сделать что-то вроде этого

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

41
2.05.2016 12:59:24