Как проверить, скрыт ли элемент в jQuery?
Как переключить видимость элемента, используя методы .hide()
, .show()
или .toggle()
?
Как можно проверить, является ли элемент видимым
или скрытым
?
3 ответ(ов)
Ваш код проверяет, скрыт ли элемент на основе его стиля display
и visibility
. Тем не менее, данный метод не учитывает видимость родительских элементов. Чтобы учитывать видимость родителя, лучше использовать методы .is(":hidden")
или .is(":visible")
.
Например:
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
В этом случае приведённый вами метод покажет, что div2
видим, хотя на самом деле он не видим, поскольку его родитель div1
скрыт. Однако данный способ проверки может быть полезен в многих сценариях, особенно когда необходимо выяснить, есть ли какие-либо элементы с ошибками, видимые в скрытом родителе, так как в таких условиях :visible
не сработает.
Ни один из этих ответов не отвечает на то, что, как я понимаю, является вопросом, который я искал, а именно: "Как мне работать с элементами, у которых visibility: hidden
?". Ни :visible
, ни :hidden
не позволят это сделать, так как они оба работают с display
по документации. Насколько я смог понять, нет селектора, который бы учитывал CSS-свойство visibility
. Вот как я решил эту задачу (стандартные селекторы jQuery, возможно, есть более сжатый синтаксис):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// обрабатываем невидимый элемент
} else {
// обрабатываем видимый элемент
}
});
Это работает для меня, и я использую методы show()
и hide()
для того, чтобы делать мой <div>
скрытым или видимым:
if( $(this).css('display') == 'none' ){
/* тут ваш код */
} else {
/* альтернативная логика */
}
Таким образом, вы можете проверять, является ли элемент скрытым, и выполнять соответствующие действия в зависимости от его состояния.
Получение выбранного текста из выпадающего списка (select) с помощью jQuery
Эквивалент document.createElement в jQuery?
Как выбрать элемент по имени с помощью jQuery?
Как установить/удалить куки с помощью jQuery?
Как удалить все CSS-классы с помощью jQuery/JavaScript?