Проверьте с помощью jQuery, является ли элемент «display: none» или заблокирован при нажатии

241

Я хочу проверить и отсортировать скрытые элементы. Можно ли найти все элементы с атрибутом displayи значением none?

Николас Фрэнсис
источник

Ответы:

544

Вы можете использовать : visible для видимых элементов и : hidden, чтобы найти скрытые элементы. Для этого скрытого элемента установлен displayатрибут none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

Чтобы проверить определенный элемент.

if($('#yourID:visible').length == 0)
{

}

Элементы считаются видимыми, если они занимают место в документе. Видимые элементы имеют ширину или высоту, которая больше нуля, то ссылка

Вы также можете использовать is () с:visible

if(!$('#yourID').is(':visible'))
{

}

Если вы хотите проверить значение отображения, то вы можете использовать css ()

if($('#yourID').css('display') == 'none')
{

}

Если вы используете дисплей, следующие значения displayмогут иметь.

дисплей: нет

дисплей: встроенный

дисплей: блок

дисплей: элемент списка

дисплей: встроенный блок

Проверьте полный список возможных displayзначений здесь .

Чтобы проверить свойство отображения с помощью JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none"; 
Адиль
источник
ну, в моем сценарии каждый элемент имеет идентификатор, поэтому уловка работает для меня :)
Николас Фрэнсис
2
@NicholasFrancis, я обновил свой ответ, чтобы узнать все элементы, которые скрыты.
Адиль
Проверяет ли он встроенный CSS тоже. У меня есть CSS display: block;написано на основе JQuery. Я не могу проверить это вашим методом. Помоги мне.
Гаурав Манрал
Добавлен ли jQuery и вы получаете доступ к элементу после добавления в DOM? Можете ли вы показать мне код? Было бы лучше сделать демо на jsfiddle.net
Adil
Что такое эквивалент в JavaScript?
TheBlackBenzKid
56
$("element").filter(function() { return $(this).css("display") == "none" });
Дипаншу Гоял
источник
7
+1: это на самом деле более полезно, чем принятый ответ на заданный вопрос , так как это будет работать, даже если родительский элемент имеет style="display: none;". Ответы будут использоваться :visibleи :hiddenзавершатся неудачно, если вы хотите, чтобы конкретный элемент отображался, а родительский элемент скрыт, поскольку эти селекторы возвращают общую видимость на странице (что не задавалось вопросом).
Ушел кодирование
Это работает при запуске unite test в среде JS DOM.
b01
Для плагина с вкладками он был настроен visibility: 'hidden';в css, поэтому проверка закончилась проверкой:$(this).css('visibility') != 'hidden'
phyatt
30

Да, вы можете использовать функцию css. Ниже приведен поиск по всем элементам div, но вы можете изменить его для любых необходимых вам элементов.

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});
jjhavokk
источник
13

Используйте это условие:

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}
рана
источник
11

В jQuery есть два метода проверки видимости:

$("#selector").is(":visible")

и

$("#selector").is(":hidden")

Вы также можете выполнять команды на основе видимости в селекторе;

$("#selector:visible").hide()

или

$("#selector:hidden").show()
Luceos
источник
6
Примечание: это не будет возвращать определенный видимый атрибут выбранных элементов, как задает вопрос, а :visibleтакже зависит от видимости родительского предка. Если предок display: noneвсех потомков не будет виден независимо от displayсостояния.
Ушел кодирование
10
$('#selector').is(':visible');
Барри Чепмен
источник
3
Примечание: это не будет возвращать определенный видимый атрибут выбранных элементов, как задает вопрос, а :visibleтакже зависит от видимости родительского предка. Если предок display: noneвсех потомков не будет виден независимо от displayсостояния.
Ушел кодирование