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

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

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

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

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

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


jquery hidden visible jquery-selectors
person Paul    schedule 31.03.2010    source источник

Ответы (3)


arrow_upward
27
arrow_downward

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

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';
}
person Nick Craver    schedule 31.03.2010
comment
Отличный ответ, как всегда, Ник! Но если для элемента установлена ​​скрытая видимость, вам нужно будет использовать его в качестве селектора return $(a).is(':hidden') && $(a).css('display') != 'none' && $(a).css('visibility') == 'visible'; - person Mottie; 31.03.2010
comment
@fudgey - Хорошо, visible вещи не скрыты, они все еще занимают место на странице. Я думаю, это зависит от того, ищете ли вы полностью скрытые вещи или вещи, которые вообще не занимают места на странице. Какое бы определение вы ни выбрали, обязательно используйте этот подход. - person Nick Craver; 31.03.2010
comment
Великолепно! Как раз тот ответ, который я хотел, и первый результат Google. Я бы только добавил, что я думаю, что более подходящее имя селектора будет :invisible. Это видно... но невидимо. - person Dave Stewart; 18.10.2012

arrow_upward
5
arrow_downward

jQuery имеет все это встроенное в наши дни

$("#child").closest(':hidden').length == 0
person root    schedule 02.03.2012

arrow_upward
1
arrow_downward

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

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

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

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

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

person Barney Scott    schedule 31.03.2010