Как проверить, является ли элемент видимым в моем случае?

Question

У меня странная проблема в моем случае.

У меня есть что-то скрытое, но jquery не может его найти.

HTML

<div id='test'> 
    <h3>title here</h3> 
</div> 

CSS

#test h3 { 
    visibility: hidden; 
} 

JS

if (('#test h3').is(':visible')) { 
    alert('visible'); 
} 

Я не должен получить окно предупреждения, потому что мой h3 тег скрыт, но окно предупреждения держать выскакивают. Может ли кто-нибудь помочь мне в этой странной проблеме? Большое спасибо!

Answer 1

Поскольку скрытие видимости все еще расходует пространство, jQuery считает их видимыми.

Вот цитата из the docs:

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

Элементы с visibility:hidden или opacity: 0 считаются видимыми, так как они все еще потребляют пространство в макете.

---

Если вы хотите проверить, если элемент visibillity не установлен в hidden, используйте:

if ($('#test h3').css('visibility') == 'visible') { 
    alert('visible'); 
} 

---

Для проверки предков тоже использовать это:

var visible = true; 

$('#test h3').parents().addBack().each(function() { 
    if ($.css(this, 'visibility') != 'visible') return visible = false; 
}); 

if (visible) { 
    // do whatever... 
} 

---

Вы можете абстрактный все, что в многоразовые filter expression:

jQuery.expr[':']['visible-real'] = function(el) { 

    var visible = true; 

    $(el).parents().addBack().each(function() { 
     if ($.css(this, 'visibility') != 'visible') return visible = false; 
    }); 

    return visible; 
}; 

Вы можете использовать его, когда вам это нужно следующим образом:

if ($('#test h3').is(':visible-real')) { 
    alert('visible'); 
} 

Вот скрипку: http://jsfiddle.net/3LGm7/