Перевірте, використовуючи jQuery, чи елементом є "display: none" або блок при натисканні

239

Я хочу перевірити і сортувати елементи, які є прихованими. Чи можливо знайти всі елементи з атрибутом displayі значенням none?

jquery css

— Микола Франциск
джерело

542

Ви можете використовувати : видимі для видимих елементів і : приховані, щоб дізнатися приховані елементи. Цей прихований елемент має displayатрибут none.

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

Щоб перевірити конкретний елемент.

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

}

Елементи вважаються видимими, якщо вони займають місце в документі. Видимі елементи мають ширину або висоту, що перевищує нуль, Довідка

Ви також можете використовувати () з: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";

— Аділь
джерело

ну, за моїм сценарієм, у кожного елемента є ідентифікатор, тому трюк працює для мене :)

— Nicholas Francis

2

@NicholasFrancis, я оновив свою відповідь, щоб з’ясувати всі приховані елементи.

— Аділь

Чи перевіряє він також inline css. У мене display: block;написаний css, вбудований у jquery. я не можу перевірити це своїм методом. допоможи мені.

— Гаурав Манрал

Додано jQuery і ви отримуєте доступ до елемента після додавання до DOM? Чи можете ви показати мені код? Було б краще зробити демо на jsfiddle.net

— Аділь

Що таке JavaScript еквівалент?

— TheBlackBenzKid

56

$("element").filter(function() { return $(this).css("display") == "none" });

— Deepanshu Goyal
джерело

7

+1: Це насправді корисніше, ніж прийнята відповідь на поставлене запитання , оскільки це спрацює, навіть якщо є батьківський елемент style="display: none;". Відповіді, які використовують :visibleі :hiddenбудуть невдалими, якщо ви хочете бачити конкретні елементи, а батьківський елемент прихований, оскільки ці селектори повертають загальну видимість на сторінці (що не було питанням).

— Пройшов кодування

Це працює під час запуску тесту об'єднання в середовищі JS DOM.

— b01

Для плагіну табуляції він встановлював visibility: 'hidden';у css, тому перевірка закінчилася також перевіряючи:$(this).css('visibility') != 'hidden'

— фіат

30

Так, ви можете використовувати cssfunction. Нижче наведено пошук усіх divs, але ви можете змінити його для будь-яких потрібних вам елементів

$('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()

— Луцеї
джерело

6

Зауважте: це не поверне конкретний видимий атрибут вибраних елементів, як це запитує, :visibleтакож залежить від видимості батьків-предків. Якщо предком є display: noneвсі нащадки, його не буде видно незалежно від displayстану.

— Пройшов кодування

10

$('#selector').is(':visible');

— Баррі Чапман
джерело

3

Зауважте: це не поверне конкретний видимий атрибут вибраних елементів, як це запитує, :visibleтакож залежить від видимості батьків-предків. Якщо предком є display: noneвсі нащадки, його не буде видно незалежно від displayстану.

— Пройшов кодування