Как я могу знать, видимый ли элемент с jQuery?

Так как в jQuery он возможный менять видимость элемента: Как я могу знать, видимый ли или не во времени выполнения элемент?

66
задан 10.11.2016, 14:18
5 ответов

Верно, что ты можешь использовать is(":visible") но из-за опыта я рекомендую тебе использование классов для того, чтобы у тебя не было проблем во время testear твои приложения, так как у многих книжных магазинов тестов нет компонентов, которые тестируются видимые и из-за многого, который твой компонент сделал hide() или show() jQuery он продолжит показывать, что он не является видимым, и поведение твоих компонентов будет странным. Это произошло со мной с книжным магазином тестов QUnit, авторов jQuery.

То, что я сделал бы, было бы: $el.toggleClass("hide") или $el.addClass("hide").

И подтверждать это с: !$el.hasClass("hide").

Кроме того нужно быть осторожно, использовав is(":visible") потому что visibility: hidden или opacity: 0 они считаются видимыми, так как они занимают место в layout.

Имей в виду, что мое решение - это, чтобы подтверждать, исключительно видимый ли элемент. Может встречаться случай, который какой-либо из родителей не был видимым и следовательно не видели. Если ты хочешь подтвердить нечто похожее, может быть, лучше, чтобы ты использовал is(":visible") или !$(..).closest(".hide").

51
ответ дан 01.12.2019, 08:18
  • 1
    Adem и # 225; s элементы также не фигурируют в качестве :visible s, если est и # 225; n в animaci и # 243; n fadeIn/Out или slideUp/Down. – Danita 16.12.2015, 01:41
  • 2
    Этот м и # 233; каждый podr и # 237; чтобы не удаваться, потому что у элемента может быть класс hide и быть видимым, если есть другое правило, которое делает это видимым. Например: <div class="hide" id="midiv">A</div> с CSS .hide { display:none; } #midiv { display:block; }, у div есть класс hide, но он видимый в браузере, потому что у правила #midiv есть больший especificidad. – Alvaro Montoro♦ 20.01.2016, 21:26

Ты можешь использовать функцию is() вместе с селектором :visible на объекте jquery уже существующий.

Например, если у тебя есть div с id: "элемент" ты можешь знать, видимый ли этот или не таким образом:

var esVisible = $("#elemento").is(":visible");

Для большей информации проверь документацию is и: видимый

38
ответ дан 01.12.2019, 08:18
  • 1
    Я не опытный в jQuery но, примени обратный tambi и # 233; n? var estaOculto = $("#elemento").is(":hidden"); – César 01.12.2015, 19:01
  • 2
    @C и # 233; sarBust и # 237; вы, если, так как внутри visible определено как !hidden: jQuery.expr.filters.visible = function( elem ) { return !jQuery.expr.filters.hidden( elem ); }; – Carlos Muñoz 01.12.2015, 19:16

Равно как использует jquery селектор :visible в Ваш пример , ты можешь присоединять это в той же самой expresiГіn bГєsqueda элемента

var visible = $("#element:visible").length > 0;

или делать выданного

var visible = $("#element").filter(":visible").length > 0;

, Эти формы выданный элементов особенно Гєtiles, когда ты будешь повторять на списке результатов

$(".elemento:visible").each(function() {
    ...
}

, Хотя, если sГіlo ты нуждаешься в ответе booleana, как хорошо написал Карлос MuГ±oz , ты это можешь делать asГ -

var isVisible = $("#elemento").is(":visible");
11
ответ дан 01.12.2019, 08:18

PodГ©s использовать следующее

if($('#elemento').css('display') == 'none'){
   // Acción si el elemento no es visible
}else{
   // Acción si el elemento es visible
}

в случае, если также давайте хотеть проверить матовость мы делаем:

if($('#elemento').css('display') == 'none' || $('#elemento').css('opacity') == 0){
       // Acción si el elemento no es visible
}else{
       // Acción si el elemento es visible
}
5
ответ дан 01.12.2019, 08:18
  • 1
    Tambi и # 233; n habr и # 237; в который смотреть стоимость visibility – Alvaro Montoro♦ 01.12.2015, 20:40

Я виделся введенный в éste случай espec¦-fico где начальный soluci¦n bastar¦ - в с:

if ($elementoDOM.is(':visible')){ console.log('el elemento está visible') }

, НО! много глаз, что, поскольку dec¦ - compañero в других комментариях ésto он не применяет к одному для элементов, у которых было бы свойство: opacity:0.

В личном mÃ: s использованный он с opacity, так как такого способа ему удается оживить aparici¦n/desaparici¦n элементов в DOM формы estética. Raz¦n, из-за которого instrucci¦n уточняет, что он заканчивается у меня функционирования:

if ($elementoDOM.css('opacity')==1) { ... } ó
if ($elementoDOM.css('opacity')==0) { ... }

быть осторожен не размещения номера (0,1) между двойными кавычками или простые!

Приветствие.

6
ответ дан 01.12.2019, 08:18

Теги

Похожие вопросы