jQuery обнаруживает видимые, но скрытые элементы - PullRequest
Новая
       21

jQuery обнаруживает видимые, но скрытые элементы

13 голосов
/ 31 марта 2010

Кажется, это должно быть довольно просто - но я не могу найти правильный селектор для него

Согласно документам (http://api.jquery.com/hidden-selector/ и http://api.jquery.com/visible-selector/)...

Элементы могут считаться скрытыми по нескольким причинам:

Элемент-предок скрыт, поэтому элемент не отображается на странице.

То, что я хочу обнаружить, это «этот элемент видим, но содержится в скрытом родителе». Т.е. если бы я сделал родителя видимым, этот элемент также был бы виден.

Ответы [ 4 ]

28 голосов
/ 31 марта 2010

Если это то, что вы обычно используете, создайте свой собственный селектор :) Вот пример: 

jQuery.expr[':'].hiddenByParent = function(a) { 
   return jQuery(a).is(':hidden') && jQuery(a).css('display') != 'none'; 
};

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

<div style="display: none" id="parent">
  <div>
      <div id="child">Test</div>
  </div>
</div>
​

Примеры использования: 

$("div:hiddenByParent").length;​​​​​​​​​​​​​​​​​​ // "2" (plain div + child match)
$("#child").is(":hiddenByParent"); // true

В качестве альтернативы вы можете использовать функцию .filter() следующим образом: 

$('selector').filter(function() {
  return $(this).is(':hidden') && $(this).css('display') != 'none';
}
5 голосов
/ 02 марта 2012

jQuery имеет все это встроенное в настоящее время 

$("#child").closest(':hidden').length == 0
1 голос
/ 31 марта 2010

Если это конкретный элемент, который вы ищете, вы можете проверить его свойство отображения 

$('#element').css('display') != 'none';

Если это не был определенный элемент, вы можете найти родительские узлы, которые скрыты, используя: hidden, затем используйте пользовательскую функцию для поиска узлов нужного вам типа. Э.Г. 

$('parent-selector:hidden').find('node-selector').each(function(){
  if($(this).css('display') != 'none') {
    // do what you wanted
  }
});

Если вам нужен чистый селектор, тогда я думаю, что вам не повезет, так как я не думаю, что вы хотите, это часть спецификации CSS, поэтому не будет в качестве селектора в jQuery.

0 голосов
/ 31 марта 2010

Не думаю, что сработает только один селектор, но 

<script>
function parentHidden(id) {
    return (!$(id).is(':hidden')) && $(id).parent().is(':hidden')));
}        
</script>

должен вернуть то, что вам нужно. Если вам нужно проверить его предков, а не только его родителей, вы можете просто заменить часть $(id).parent().is(':hidden') функцией, которая будет возвращать «цепочку предков».

...