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

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

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

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

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

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

Ответы

Ответ 1

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

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';
}

Ответ 2

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

$("#child").closest(':hidden').length == 0

Ответ 3

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

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

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

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

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

Ответ 4

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

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

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