hiddenセレクター
セレクター:hiddenは、ページ上で非表示になっているすべての要素を選択します。
visibility: hiddenまたはopacity: 0が設定されている要素は、レイアウト内でスペースを占有するため、表示されていると見なされます。要素が非表示と見なされる理由はいくつかあります:CSSプロパティdisplayの値がnoneである、属性type="hidden"が設定されている、高さまたは幅が0に設定されている、または親要素が非表示になっている場合などです。
:hiddenはCSS仕様には含まれていないため、現代のブラウザーでパフォーマンスを向上させるには、まず純粋なCSSセレクターを使用して要素をフィルタリングし、その後.filter(':hidden')を適用するのが良い方法です。
他の方法、例えばクラスを使用して要素の可視性を追跡することは、より良いパフォーマンスを提供する可能性があります。
構文
非表示の要素を選択するには以下のようにします:
$(':hidden');
例
ボタン#testをクリックして、見えない四角を表示してみましょう:
<button id="test">表示</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('#test').click(function() {
$('div:hidden').show('slow');
});