87

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

23

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

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

3 ответ(ов)

11

Ваш код проверяет, скрыт ли элемент на основе его стиля display и visibility. Тем не менее, данный метод не учитывает видимость родительских элементов. Чтобы учитывать видимость родителя, лучше использовать методы .is(":hidden") или .is(":visible").

Например:

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

В этом случае приведённый вами метод покажет, что div2 видим, хотя на самом деле он не видим, поскольку его родитель div1 скрыт. Однако данный способ проверки может быть полезен в многих сценариях, особенно когда необходимо выяснить, есть ли какие-либо элементы с ошибками, видимые в скрытом родителе, так как в таких условиях :visible не сработает.

5

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

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // обрабатываем невидимый элемент
    } else {
        // обрабатываем видимый элемент
    }
});
2

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

if( $(this).css('display') == 'none' ){
    /* тут ваш код */
} else {
    /* альтернативная логика */
}

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

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь