hiddenセレクター

セレクター:hiddenは、ページ上で非表示になっているすべての要素を選択します。 visibility: hiddenまたはopacity: 0が設定されている要素は、レイアウト内でスペースを占有するため、表示されていると見なされます。要素が非表示と見なされる理由はいくつかあります：CSSプロパティdisplayの値がnoneである、属性type="hidden"が設定されている、高さまたは幅が0に設定されている、または親要素が非表示になっている場合などです。 :hiddenはCSS仕様には含まれていないため、現代のブラウザーでパフォーマンスを向上させるには、まず純粋なCSSセレクターを使用して要素をフィルタリングし、その後.filter(':hidden')を適用するのが良い方法です。 他の方法、例えばクラスを使用して要素の可視性を追跡することは、より良いパフォーマンスを提供する可能性があります。

構文

非表示の要素を選択するには以下のようにします：

javascript$(':hidden');

例

ボタン#testをクリックして、見えない四角を表示してみましょう：

html<button id="test">表示</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('#test').click(function() {
  $('div:hidden').show('slow');
});

関連項目