Питання Як перевірити, чи є елемент прихованим у jQuery?


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

Як би ви перевірити, чи елемент є видимий або прихований?


6705
2017-10-07 13:03


походження


Варто згадати (навіть після всього цього часу), що $(element).is(":visible") працює для jQuery 1.4.4, але не для jQuery 1.3.2, під Інтернет-провідник & nbsp; 8. Це можна перевірити, використовуючи Корисний тестовий фрагмент Цветоміра Цонева. Просто не забудьте змінити версію jQuery, щоб протестувати під кожним з них. - Reuben
Це пов'язано, хоча інше питання: stackoverflow.com/questions/17425543/... - Mark Schultheiss
Яке твоє визначення сховане? - fabspro


Відповіді:


Оскільки питання стосується одного елемента, цей код може бути більш підходящим:

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

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

Такий же, як пропозиція twernt, але застосовується до одного елемента; і це відповідає алгоритму, рекомендованому у FAQ часто задаються


8293
2017-10-07 13:30



Схоже, це рішення спонукало б до заплутаності visible=false і display:none; в той час як рішення Mote явно ігнорує кодів, які мають намір перевірити display:none; (через згадування про приховування і показують, який контроль display:none ні visible=true) - kralco626
Це правильно, але :visible також перевірить, чи відображаються батьківські елементи, як зазначив Чіборг. - Tsvetomir Tsonev
Ви маєте точку - я дам зрозуміти, що код перевіряє тільки для display власність Враховуючи, що оригінальне питання стосується show() і hide(), і вони встановили display, моя відповідь правильна. До речі, він працює з IE7, це тестовий фрагмент - jsfiddle.net/MWZss ; - Tsvetomir Tsonev
Я насправді виявив, що слова зворотної логіки краще:! $ ('Selector'). (': Hidden'); з якоїсь причини. Варто спробувати. - Kzqai
Ось простий контрольний тест: () against regexp:jsperf.com/jquery-is-vs-regexp-for-css-visibility. Висновок: якщо ви вийшли за продуктивність, використовуйте regexp over () (оскільки () спочатку шукає всі приховані вузли, перш ніж шукати фактичний елемент). - Max Leske


Ви можете скористатись hidden селектор:

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

І це visible селектор:

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

1264
2017-10-07 13:16



просто будьте обережні, в цій презентації є якісь корисні поради щодо роботи: addyosmani.com/jqprovenperformance - codecraig
На сторінках з 21 по 28 він показує, як повільний: прихований або: видимий порівнюється з іншими селекторами. Дякуємо, що вказали на це. - Etienne Dupuis
Коли ви маєте справу з декількома елементами і дуже мало - тобто, АБСОРДЛИВІ ВІД величезних випадків - час питання є сміхо незначною проблемою. О, ні! Знадобилося 42 мс замість 19 мс !!! - vbullinger
Я використовую цей селектор за допомогою елемента mamually. $ ('element: hidden') завжди відповідає мені! - ZoomIn
@ cwingrav Можливо, ви захочете переглянути документацію: приховано застосовується до всіх елементів. Форма елементів з type="hidden" це лише один випадок, який може викликати: прихований. Елементи без висоти та ширини, елементи з display: none, а також елементи з прихованими предками також кваліфікуються як: приховані. - Joshua Walsh


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 ні. Але вищесказане може бути корисним у багатьох випадках, особливо, коли вам потрібно знайти, чи є видимих ​​у подержених батьків помилки, оскільки в таких умовах :visible не буде працювати


784
2017-10-07 13:09



Це лише перевіряє властивості дисплея одного елемента. Параметр видимого атрибута перевіряє також видимість батьківських елементів. - chiborg
Це єдине рішення, яке працювало для мене під час тестування з IE 8. - evanmcd
Це не рішення моєї проблеми, але цей метод допоміг визначити виправлення для перевірки власності на мою проблему. - dchayka
@chiborg Так, але іноді це те, що ви хочете, і я повинен був навчитися важко, як "розумний" jQuery був ... - Casey
Це відповідає на питання, коли мова йде про єдиний елемент і з використанням hide(), show() і toggle() функції, однак, як більшість вже сказали, ми повинні використовувати :visible і :hidden псевдокласи. - Jimmy Knoot


Жоден з цих відповідей не відповідає тому, що я розумію, це питання, яке я шукав, "Як я можу обробляти елементи, які мають visibility: hidden? ". Ні :visible ні :hidden буде впоратися з цим, оскільки вони обидва шукають дисплей в документації. Наскільки я міг визначити, немає селектора для обробки видимості CSS. Ось як я вирішив це (стандартні jQuery селектори, може бути більш стислий синтаксис):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

451
2018-03-24 18:44



Ця відповідь добре розглядати visibility буквально, але питання було How you would test if an element has been hidden or shown using jQuery?. Використання jQuery означає: display власність - MarioDS
Елементи з visibility: hidden або opacity: 0 вважаються видимими, оскільки вони все ще споживають простір у макеті. Побачити відповісти на Педро Рейнхо і jQuery документація на :visible селектор - awe
вам потрібно перейти до DOM для перевірки батьків вузла, або ж це марно. - vsync
це не спрацює, якщо ви сховаєте елемент з .hide (). - user3197818


Від Як визначити стан переключеного елемента?


Ви можете визначити, чи стискується елемент, використовуючи :visible і :hidden селектори

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

Якщо ви просто вчиняєте елемент на основі його видимості, ви можете просто включити його :visible або :hidden в виді селектора. Наприклад:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

322
2018-01-13 21:13



Цікаво, чому жодна відповідь не згадує випадок, коли елемент віддаляється від видимого вікна, наприклад top:-1000px... Здогадайтеся, що це краєвид - jazzcat


Часто, перевіряючи, чи є щось видимим чи ні, ви збираєтеся йти прямо вперед негайно і зробити щось інше з ним. Сортування 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" });

236
2017-07-25 10:21



Немає підстав для вилучення вузла DOM у фрагменті, який використовується в прикладі, і потім потрібно ще раз переглянути його. Краще просто зробити: var $ button = $ ('# btnUpdate'); А потім у виразі "If" просто використовуйте кнопку $ замість $ (кнопка). Має перевагу кешування об'єкта jQuery. - LocalPCGuy
ось простий приклад jquerypot.com/... - Ketan Savaliya


The :visible селектор відповідно до jQuery документація:

  • У них є CSS display вартість none.
  • Вони є елементами форми з type="hidden".
  • Їх ширина і висота мають явне значення 0.
  • Елемент предка прихований, тому елемент не відображається на сторінці.

Елементи з visibility: hidden або opacity: 0 вважаються видимими, оскільки вони все ще споживають простір у макеті.

Це корисно в деяких випадках і непотрібне в інших, тому що, якщо ви хочете перевірити, чи є елемент видимим (display != none), ігноруючи видимість батьків, ви побачите, що робите .css("display") == 'none' це не тільки швидше, але також поверне перевірку видимості правильно.

Якщо ви хочете перевірити видимість замість дисплея, ви повинні використовувати: .css("visibility") == "hidden".

Також враховуйте додаткові примітки jQuery:

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

Крім того, якщо ви стурбовані продуктивністю, вам слід перевірити Тепер ви бачите мене ... показує / ховає продуктивність (2010-05-04). І використовуйте інші методи, щоб показати та приховати елементи.


188
2017-11-25 09:16