jquery - jQuery は、表示されているが非表示の要素を検出します

Question

これはかなり簡単なはずですが、適切なセレクターが見つかりません

要素は、いくつかの理由で非表示と見なされます。

先祖要素は隠されているため、要素はページに表示されません。

私が検出したいのは、「この要素は表示されていますが、非表示の親に含まれています」です。つまり、親を可視にすると、この要素も可視になります。

score 27 · Accepted Answer

これが一般的に使用されるものである場合は、独自のセレクターを作成してください:) 次に例を示します。

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

score 5 · Accepted Answer

jQuery には、このすべてが組み込まれています。

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

score 1 · Accepted Answer

探している特定の要素である場合は、その表示プロパティを確認できます

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

特定の要素でない場合は、:hidden を使用して非表示になっている親ノードを見つけ、カスタム関数を使用して必要なタイプのノードを探すことができます。例えば

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

きれいなセレクターが必要な場合は、必要なものが CSS 仕様の一部であるとは思わないため、jQuery のセレクターとして存在しないため、運が悪いと思います。

3 に答える 3